织梦怎么建设论坛网站,郑州外贸网站建设公司价格,外贸英文网站制作,网站的模块1.Vue3的响应式原理
2.ref函数和reactive函数的对比
3.setup注意点
一.Vue3的响应式原理
1.Vue2.x中的响应式原理
① 实现原理
对象类型#xff1a;通过Object.defineProperty() 对属性的读取#xff0c;修改进行拦截#xff08;数据劫持#xff09;数组类型#xf…1.Vue3的响应式原理
2.ref函数和reactive函数的对比
3.setup注意点
一.Vue3的响应式原理
1.Vue2.x中的响应式原理
① 实现原理
对象类型通过Object.defineProperty() 对属性的读取修改进行拦截数据劫持数组类型通过重写更新数据的一系列方法来实现拦截对数组变更方法进行包裹
② 存在问题
新增属性删除属性界面不会更新直接通过下标修改数组界面不会自动更新
2.Vue3.x的响应式原理
① 实现原理
通过Proxy代理拦截对象中任意属性的变化包括对属性的读写属性的添加属性的删除 通过Reflect反射对源对象的属性进行操作 const p new Proxy(person, {get (target, propName) {console.log(读取, target, propName)return Reflect.get(target, propName)},set (target, propName, value) {console.log(修改, value)return Reflect.set(target, propName, value)},deleteProperty (target, propName) {return Reflect.deleteProperty(target, propName)}})
二.ref函数和reactive函数的对比
① 从定义数据的角度
ref用来定义基本类型数据reactive用来定义对象数组数据类型ref也可以用来定义对象或数组类型的数据它内部会自动通过reactive转为代理对象
② 从原理角度对比
ref通过Object.defineProperty的get与set来实现响应式数据劫持reactive通过使用Proxy来实现响应式数据劫持并通过Reflect操作元对象内部的数据
③ 从使用角度对比
ref定义的数据操作数据需要.value读取模板的时候模板中直接读取不需要用.valuereactive定义的数据操作数据与读取数据均不需要.value
三.setup使用两个注意点
setup执行的时机在beforeCreate之前执行一次this是undefined, setup中不能使用thissetup的参数 ① props值为对象包含组件外部传递过来且组件内部声明接收了的属性 ② context:上下文 attrs值为对象包含组件外部传递过来但没有在props配置中声明的属性相当于this.$attrsslots:收到的插槽内容相当于this.$slotsemit:分发自定义事件的函数相当于this.$emit
