视频网站直播怎么做的,做seo推广公司网站,诸城市做网站,前端怎么做网站文章目录一、Vue3相比Vue2#xff0c;更新了什么变化#xff1f;二、Proxy 代理响应式原理三、组合式 API (Composition API)setup()函数:ref()函数reactive()函数组合式 setup 中使用 Props 父向子传递参数计算属性watch#xff08;数据监视#xff09;watchEffect#x…
文章目录一、Vue3相比Vue2更新了什么变化二、Proxy 代理响应式原理三、组合式 API (Composition API)setup()函数:ref()函数reactive()函数组合式 setup 中使用 Props 父向子传递参数计算属性watch数据监视watchEffect函数Vue3 生命周期钩子函数自定义 Hook 函数toRef 和 toRefs 钩子函数shallowReactive 和 shallowRef 函数readonly 和 shallowReadonly 函数toRaw 和 markRaw 函数customRef 自定义Ref 函数依赖注入 provide(), inject() provide() 函数inject() 函数defineAsyncComponent 函数总结一、Vue3相比Vue2更新了什么变化 新增 响应式数据劫持的Api在Vue2 中数据响应式劫持更新采用的是 Object.defineProperty()但是 Object.defineProperty()会有一些缺陷例如监听不到对象属性的新增或者删除以及数组通过下标索引直接更改数据后无法响应式更新。所以Vue3中新增了 Proxy 作为响应式数据劫持的Api响应式数据监听更加高效。友好的支持了 TypeScript 的语法。以及新增了组合式API 的编码风格 二、Proxy 代理响应式原理 let arr {name: 张三,age: 18}let Responsivedata new Proxy(arr, { //通过 Proxy 实例实现代理对象get(target, attributeName) { // 收到两个参数 用来捕获读取代理对象属性时的数据// target代理的源数据// attributeName : 操作当条数据的keyconsole.log(target, attributeName);return Reflect.get(target, attributeName); // 使用 Reflect 反射对象 把数据 返回出去},set(target, attributeName, value) { //捕获修改新增对象属性时拿到新增修改的值// target代理的源数据// attributeName : 操作当条数据的key// value 新增 修改的 value 值console.log(target, attributeName, value);Reflect.set(target, attributeName, value); // 使用 Reflect 反射对象 在这里真正操作修改源数据的变化},deleteProperty(target, attributeName) { //捕获 源数据 以及删除当前数据的key。// target代理的源数据// attributeName : 操作当条数据的keyconsole.log(target, attributeName);return Reflect.deleteProperty(target, attributeName); // 使用 Reflect 反射对象 在这里真正操作删除源数据。}});点击了解 Reflect
三、组合式 API (Composition API)
概念 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的它的灵活性也使得组织和重用逻辑的模式变得更加强大。 setup()函数: setup是vue3新增的生命周期函数setup的加入就是为了让vue3使用组合式APIComposition API。使用组合式API更符合大型项目的开发通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑。 ———————— setup内部可以定义数据和方法如果想在模板中使用必须通过return进行返回。 ———————— setup函数内要使用的Api方法配置项采用按需映入 如 computed、watch等。 script
import { computed, watch} from vue; //按需映入
export default {name: HelloWorld,setup() {let name 张三; //直接定义数据let arr [{ a: 1 }, { b: 2 }];const addnum () name 李四; //直接定义数据的方法return {name,arr,addnum }}
}
/script注意如上在setup中定义的数据页面中虽然能够读取但是数据发生改变时不会触发响应式更新。需要借助 ref() 函数 以及 reactive() 函数实现响应式
ref()函数
script
import { ref } from vue //按需映入ref
export default {name: HelloWorld,setup() {let name ref(张三); //直接定义数据const addnum () name.value 李四; //通过.value 操作数据console.log(name); //见下图return {name,addnum }}
}
/script在setup函数中 ref() 函数 通常用来 包裹 基本数据类型 为该数据提供响应式监听,操作该数据时需要通过点. value 拿取到数据。 reactive()函数
script
import { ref, reactive } from vue
export default {name: HelloWorld,setup() {let arr reactive([{ a: 1 }, { b: 2 }]);console.log(arr); //通过 reactive 函数包裹的 数据结构见下图const addnum () arr[0].a 456; //直接更改数据的方法return {addnum,arr}}
}
/scriptreactive 函数 通常用来包裹 引用数据类型为引用数据类型提供响应式。 ref 函数 和 reactive 函数 总结 ref() 函数 用来定义基本数据类型。reactive () 函数 用来定义 引用数据类型。 -备注 ref函数也能用来定义 引用数据类型 但reactive () 函数不能用来定义基本数据类型它内部会自动 调用 reactive 函数 转为代理对象》 但是不推荐。ref 函数 响应式原理 依然采用的是 Object.defineProperty 的get 和set 方法 通过 数据劫持来完成响应式。reactive() 函数 通过 ES6 的 Proxy 代理对象的数据劫持来实现响应式 见上节 Proxy 响应式原理。ref 函数定义的数据 操作 数据时 需要通过 .value 模板中读取 则不需要。reactive 函数 定义的数据 操作数据或 模板读取时均不需要 .value。 组合式 setup 中使用 Props 父向子传递参数
setup 可以接收两个参数 第一个参数Props
export default {name: HelloWorld,props:[masg], //父组件中按v2 正常传递参数子组件这里正常接收setup(props,context) {// setup 这里的第一个参数 就是 Props 不过被setup包裹成了 代理对象数据具有响应式console.log(props,context);return {props}}
}第二个参数 context 上下文对象)
context 主要接收三个参数
attrs值为对象包含组件外部传递过来的参数但是并没有在 Props 中声明接收则会出现在这里Props 中如果接受了参数则就不会再出现在 这里 和 V2中 this.$attrs 同理emit分发自定义事件的函数 同 v2 this.$emitslots接收到外部组件传入的 插槽内容。 计算属性 在Vue3.x 中计算属性属性不再通过配置项操作而是通过引用一个计算属性函数。 点击查看Vue2中计算属性 import { ref, reactive, computed } from vue //引入 computed 计算属性函数函数回调 return 返回处理后的数据
export default {name: HelloWorld,setup() {let name ref(张三);let age ref(18);// let calculation computed(() { //常见写法读取 计算属性// return ${name.value}${age.value}// });let calculation computed({ //完整写法。可读取也可修改get() {return ${name.value}${age.value}},set(value) {return ${name.value}${age.value}${value}}});return { //提示 别忘了 所定义的 数据 以及函数方法 记得 return 出去页面才能使用。name,age,calculation,}}
}
/scriptwatch数据监视 同样在Vue3.x 中watch 属性不再通过配置项操作而是通过引用一个 watch 函数。 点击查看Vue2 中watch import { ref, reactive, watch } from vue //引入 watch 函数
export default {name: HelloWorld,setup() {let age ref(18);let num ref(22);let arr reactive([{ a: 1, b: 2, c: 3 }, { b: 2 }, { c: 5 }]);let obj reactive({age: 14,name: 张三,job: {a: 1,b: 2}})//监听ref 基本数据类型//使用场景一watch(num, (a, b) { // watch 函数监听 可以接收三个参数 第一个参数 为 要监听的值 第二个参数为 回调函数且回调函数 也能 接收两个参数为新值和旧值。 第三个 参数 为一个配置对象 console.log(检测到数据被修改);},{ immediate: true }); // immediate 为true时可以开启 页面初始化 时就执行一次监听//使用场景二watch([age, num, arr], (a, b) { // watch 函数也可以一次性监听多个数据第一个参数设置为一个数组里面配置 多个需要监听得数据。console.log(检测到数据被修改, a, b);})let ick () age.value;/* 监听 reactive 引用数据类型 注意watch 函数监听 reactive 数据时存在两个问题 1. 无法正确获取 旧的值2. 强制开启了深度监视模式配置 deep:false 无效
*/// 场景三 监听 reactive 所定义数据的全部属性let ickbtn () arr[0].awatch(arr, (a, b) {console.log(监听到arr更改了, a, b);}, { immediate: true })//场景四 监听 reactive 所定义数据的某个属性watch 函数第一个参数是一个函数 返回值就是需要监听的值let ick () arr[0].awatch(() arr[0].a, (a, b) {console.log(监听到arr[0].a 更改了, a, b);}, { immediate: true })//场景五 监听 reactive 所定义数据的某一些属性watch 函数第一个参数是一个数组 数组中返回多个函数监听项。let ick () {arr[0].a;arr[0].b;}watch([() arr[0].a, () arr[0].b], (a, b) {console.log(监听到arr[0].a 和 b 更改了, a, b);}, { immediate: true })// 特殊场景let ick () {obj.job.b}watch(() obj.job, (a, b) {console.log(监听到arr[0].a 和 b 更改了, a, b);}, { immediate: true, deep: true }) //此处如果 监听的是 reactive 所定义数据中的某个 属性同时所操作更改的值又 位于所监听的 属性下面这时候 默认是监听不到更改的所以这里需要手动 配置 deeptrue 开启深度监视return {age,arr,ick,num,ickbtn,obj}}
}
/scriptwatchEffect函数 Vue3 生命周期钩子函数 注明 在Vue3中依然可以通过配置项使用Vue2中的 生命周期钩子函数但是有两个钩子函数名称 被更名 beforeDestroy 》更名为 beforeUnmount destroyed 》 更名 为 unmounted 官方推荐在Vue 3中 使用 组合式 API (Composition API) 所以Vue3 也提供了 一套 组合式 API (Composition API) 形式的生命周期钩子函数与Vue2中的 函数钩子对应 如下
Vue2Vue3setup描述beforeCreatesetup() 实例创建前调用createdsetup() 实例创建后调用beforeMountonBeforeMountDOM挂载前调用mountedonMountedDOM挂载成功后调用beforeUpdateonBeforeUpdate数据更新之前调用updatedonUpdated数据更新之后调用beforeUnmountonBeforeUnmount组件卸载之前调用unmountedonUnmounted组件卸载完成后调用
自定义 Hook 函数 其本质是一个函数把 setup 函数中使用的 Composition API 放到一个文件中进行了封装然后在需要用到的地方进行引入类似于 vue2.x 中的 Mixin。总结就是把多个地方都会用到的 组合式api 方法进行抽离化封装。 toRef 和 toRefs 钩子函数 使用场景当结构模板中使用到 reactive 对象类型数据的时候如果数据结构嵌套过深的时候 会出现 大量 xxx.xxx.xxx 的赋值现象 ———————————————————————————————————————————————————— 作用代理创建一个 Ref 对象其 Value 值 映射到 一个指定对象中的某个属性 ———————————————————————————————————————————————————— 语法let name toRef(obj, name); obj是所要代理的对象name是obj身上所要具体映射的 key。 ———————————————————————————————————————————————————— 应用要将响应式数据中的某个属性单独提供给外部使用时并且需要依然保持 响应式 ———————————————————————————————————————————————————— 扩展toRefs 和 toRef 功能基本一致但是可以批量创建 ref对象 语法 toRefs (obj) shallowReactive 和 shallowRef 函数 shallowReactive处理对象形式的数据时只进行浅层次监听响应式只处理最外层数据。 ———————————————————————————————————————— shallowRef 当传入基本数据类型的时候作用和 ref 一样如果传入的是对象类型数据时则不会进行响应式监听处理。 readonly 和 shallowReadonly 函数 readonly 把一个响应式数据限制为只读的深层次的 shallowReadonly 把一个响应式数据限制为只读的浅层次的 toRaw 和 markRaw 函数 toRaw将 reactive 生成的响应式对象 转化成普通的原始对象如果传入的是 ref 数据 之前会报出 undefined vue最新版修复后 则不会进行转化处理也不会报 undefined markRaw 标记一个对象使其被标记后的对象不会被转换成响应式 数据对象。 customRef 自定义Ref 函数 概念创建一个自定义的 ref显式声明对其依赖追踪和更新触发的控制方式。,使其能够使开发者更加灵活地操作响应式数据。 setup() {let myref (val) {return customRef((track, trigger) {return {get() {console.log(读取数据);track()return val},set(newval) {console.log(修改数据);val newvaltrigger()}}})}let keywordname myref(500)return {keywordname}}依赖注入 provide(), inject() 作用用来实现跨级组件间的数据通讯 provide() 函数 inject() 函数 defineAsyncComponent 函数 作用定义一个异步组件的的导入 不过需要 搭配 组件使用。 总结
上手章节到此结束
本文 为 Vue 2 开发者提供 Vue3 的开发过度上手手册Vue3 的变化 不止于这些更多的 新特征还需要 开发者自己去发现 下面附上
点击访问Vue3 官网
