Vue2与Vue3区别02-响应式的实现
-
Vue2中的响应式
实现原理:
对象类型:Object.defineProperty()对属性的读取/修改进行拦截
数组类型: 通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行包裹)
Object.defineProperty(data,‘属性名’,{
get(){},
set(){}
})
存在问题:
新增属性/删除属性,界面不会更新
通过Vue.set()或vm.$set()实现新增属性/修改更新
Vue.delete()或vm.$delete()实现删除属性更新
直接通过下标修改数组,界面不会自动更新
-
Vue3中的响应式
实现原理:
通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写/添加/删除
通过Reflect(反射):对源对象的属性进行操作
new Proxy(对象,{ //get为读取属性值,target参数表示操作对象,propName是对象中对应的属性 get(target,propName){ //通过反射Reflect操作 return Reflect.get(target,prop) }, //设置属性值或添加新属性 set(target,propName,value){ return Reflect.set(target,propName,value) }, //删除属性 deleteProperty(target,prop){ return Reflect.deleteProperty(target,prop) } })
实际使用时,vue3-app.vue对应代码:
原理:reactive通过使用Proxy来实现响应式,通过Reflect操作元对象
export default{ name:'App', setup(){ //响应式对象--reactive() let person = reactive({ name:'zs', age:20, x:{} }) function f(){} //返回person对象和f方法 return {person,f} } }
3.ref与reactive对比
定义时:
ref用来定义基本数据类型
reactive用来定义对象类型数据
ref也可用来定义对象类型数据,内部通过reactive转为代理对象
原理:
Object.defineProperty()在的get与set实现响应式(数据劫持)
reactive通过使用Proxy实现响应式,并通过Reflect操作源对象内部的数据
使用角度:
ref定义的数据,操作数据需要.value,读取数据时模板中直接读取,不需要.value
reactive定义的数据,操作与读取数据,都不需要.value