2. vue2和vue3双向绑定的区别
-
vue2.0
-
实现原理:基于ES5中的
Object.defineProperty()
来实现双向绑定,把这些 property 全部转为 getter/setter; -
缺陷:
1. 对于对象无法检测property的添加和删除;
2. 对于数组无法通过索引修改数组项,无法修改数组length; -
补救措施:
1. 对于对象的添加和修改,可使用
Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式 property; 还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:
this.$set(this.someObject,'b',2)
2. 对于数组的元素的修改和length修改
* 对于数组元素的修改
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.items, indexOfItem, newValue)
* 对于数组length的修改
vm.items.splice(newLength)
- vue3.0
-
实现原理:基于ES6的Proxy来实现双向绑定;
以下伪代码说明Proxy是如何工作的,
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
track(target, key)
return target[key]
},
set(target, key, value) {
target[key] = value
trigger(target, key)
}
})
}
function ref(value) {
const refObject = {
get value() {
track(refObject, 'value')
return value
},
set value(newValue) {
value = newValue
trigger(refObject, 'value')
}
}
return refObject
}
- 官方解释: