开元棋牌网站怎么做,公司网站的个人主页怎么做,seo优化前景,中山比好的做网站的公司谈到vue3的双向绑定原理#xff0c;就得先知道#xff0c;为什么vue2的双向绑定方式会被废弃#xff1f;
vue2的双向绑定
Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性#xff0c;或者修改一个对象的现有属性#xff0c;并返回…谈到vue3的双向绑定原理就得先知道为什么vue2的双向绑定方式会被废弃
vue2的双向绑定
Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性或者修改一个对象的现有属性并返回此对象
相关语法详见这篇文章Object.defineProperty
实现监听器
调用defineReactive数据发生变化触发update方法实现数据响应式
// 遍历对象
function observe(obj) {if (!obj || typeof obj ! object) {return}Object.keys(obj).forEach(key {defineReactive(obj, key, obj[key])})
}// 劫持对象
function defineReactive(obj, key, val) {observe(val) // 存在嵌套对象的情况下需要进行递归Object.defineProperty(obj, key, {get() {console.log(get ${key}:${val});return val},set(newVal) {if (newVal ! val) {val newValobserve(newVal) // 新值是对象的情况}}})
}const obj {name: initial name,age: 30
}
observe(obj)
setTimeout((){obj.age 33
},5000)实现监听器更详细的讲解可以阅读这篇文章从0开始实现简易版vue2
局限性
上述例子能够实现对一个对象的基本响应式但仍然存在诸多问题
对象
现在对一个对象进行添加与删除属性操作无法劫持到
const obj {name: initial name,age: 30
}
observe(obj)
obj.school HPU
delete obj.ageObject.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。
Vue里是通过递归以及遍历data对象来实现对数据的监控的如果属性值也是对象那么需要深度监听容易造成性能问题。
显然如果能劫持一个完整的对象不管是对操作性还是性能都会有一个很大的提升。
数组
在Vue中无法监控到数组下标的变化导致直接通过数组的下标给数组设置值无法实现数据响应式。
const arrData [1,2,3,4,5];
observe(arrData)arrData.push()
arrData.pop()但是对已经劫持过的数组原生js是能够实现对已有下标更新数据实现数据响应式。这里vue是无法做到的它对此进行了限制。
arrData[0] testarrData[0] // get 0:test所以在Vue2中增加了$set、$delete API并且对数组api方法(push pop shift unshift splice sort reverse)进行了重写。。
// 数组重写
const originalProto Array.prototype
const arrayProto Object.create(originalProto)
[push, pop, shift, unshift, splice, reverse, sort].forEach(method {arrayProto[method] function {originalProto[method].apply(this.arguments)dep.notice()}
});// set、delete// 对象
Vue.set(obj, sex, man)
Vue.delete(obj, sex)// 数组
Vue.set(arrData, 0, test)
Vue.delete(arrData, 0)经过vue内部处理后可以使用上述数组方法来实现数组的动态更新
vue3的双向绑定
proxy
相关语法详见这篇文章Proxy
实现监听器
Proxy的监听是针对一个对象的那么对这个对象的所有操作会进入监听操作这就完全可以代理所有属性了。
function reactive(obj) {if (!obj || typeof obj ! object) {return obj}// Proxy相当于在对象外层加拦截const observed new Proxy(obj, {get(target, key, receiver) {const res Reflect.get(target, key, receiver)console.log(获取${key}:${res})return res},set(target, key, value, receiver) {const res Reflect.set(target, key, value, receiver)console.log(设置${key}:${value})return res},deleteProperty(target, key) {const res Reflect.deleteProperty(target, key)console.log(删除${key}:${res})return res}})return observed
}测试一下对对象的操作发现都能劫持
const state reactive({name: caoyuan
})
// 1.获取
state.name // 获取name:caoyuan
// 2.设置已存在属性
state.name name changed // 设置name:name changed
// 3.设置不存在属性
state.sex man // 设置sex:man
// 4.删除属性
delete state.sex // 删除sex:true也可以直接监听数组的变化push、pop、splice等
const arr [1,2,3]
const proxtArr reactive(arr)
proxtArr.push(4)// 输出
// 获取push:function push() { [native code] }
// 获取length:3
// 设置3:4
// 设置length:4再测试嵌套对象情况这时候发现没有监听到更深层级的数据变化了
const state reactive({childObj: { a: 1 }
})// 读取嵌套对象属性
state.childObj.a // 输出获取childObj:[object Object] 没有具体到子对象的键名// 设置嵌套对象属性
state.childObj.a 10 // 无输出内容如果要解决需要进行递归处理
function reactive(obj) {if (!obj || typeof obj ! object) {return obj}// Proxy相当于在对象外层加拦截const observed new Proxy(obj, {get(target, key, receiver) {const res Reflect.get(target, key, receiver)console.log(获取${key}:${res})return typeof res object res ! null ? reactive(res) : res},set(target, key, value, receiver) {const res Reflect.set(target, key, value, receiver)console.log(设置${key}:${value})return typeof res object res ! null ? reactive(res) : res},})return observed
}const state reactive({childObj: { a: 1 }
})// 读取嵌套对象属性
state.childObj.a
// 输出如下
// 获取childObj:[object Object]
// 获取a:1// 设置嵌套对象属性
state.childObj.a 10
// 输出如下
// 获取childObj:[object Object]
// 设置a:10Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等这是Object.defineProperty不具备的
Proxy 不兼容IE也没有 polyfill, 而defineProperty 能支持到IE9
