vue2 和 vue3 双向绑定数据原理
vue2 Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
每次劫持数据,都会层层遍历,影响性能,数组劫持数据,能劫持到push、pop、shift、unshift、等数组操作方法。
const object1 = {};
Object.defineProperty(object1, 'property1', {
value: 42,
writable: false
});
object1.property1 = 77;
// throws an error in strict mode
console.log(object1.property1);
// expected output: 42
vue3 proxy
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
可直接监听数组类型的数据变化性能的提升监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升可直接实现对象属性的新增/删除;