vue响应式原理的实现

Posted 2021-03-12 lyly96720

响应式实现的原理---如何监控数据的变化：两种方法

Vue 2.x defineProperty(es5)

Vue 3.x Proxy(es6)
语法：Object.defineProperty(参数1，参数2，参数3)
参数1：目标对象
参数2：需要修改或者添加的属性名
参数3：目标对象属性的一些特征（是一个对象）

其中参数3中也有一些参数：
参数1：value：属性值
参数2：writable：对象属性值是否可被修改，true表示允许，false表示不允许
参数3：configurable：对象属性是否可被删除，true为允许，false为不允许
参数4：enumerable：对象属性是否可被枚举（即遍历）
参数5：get()：给一个属性提供getter方法，当访问这个对象的属性值时触发该方法
参数6：set()：给一个属性提供setter方法，当设置这个对象的属性值时触发该方法

这种方式通过下标更改对象属性，或者直接改变数组长度等，就不能检查到是否更改了属性

var obj = {a:1}
object.defineProperty(obj,"wa",{value : 5 })
?var?obj?=?{
????????a:?1
????}
????Object.defineProperty(obj,?'wa',?{
            //添加一个新属性wa,当检测到wa的值改变时，触发set（）函数，这时在set()函数中给obj的就旧属性a重新赋值
????????set(value)?{
????????????obj.a?=?value;
????????}
????})
????obj.wa?=?123;
????console.log(obj.a);

可以通过es6的代理（Proxy）来监测，可以对数据改变和数据截取做劫持
Proxy的作用

对于代理模式 Proxy 的作用主要体现在三个方面:
1、 拦截和监视外部对对象的访问
2、 降低函数或类的复杂度
3、 在复杂操作前对操作进行校验或对所需资源进行管理

var?obj?=?{
????????a:?1
????}
????var?pa?=?new?Proxy(obj,?{
????????set(target,?property,?value)?{
????????????console.log(target,?property,?value)
????????????target[property]?=?value;
????????},?get(target,?property)?{
????????????alert("获取到了obj的a值")
????????????return?target[property];
????????}
????})
????pa.a?=?12345

//pa代理了obj 也就是pa拦截了目标对象obj的访问。所有访问obj属性的操作都被get()函数拦截，
所有设置属性都被set()函数拦截，所以，handle就是一个拦截处理函数，必须使用pa（代理对象）代理才能生效，
????console.log(pa.a);
代理的作用就是拦截监控外部对对象的访问