Vue响应式变化

Posted 2020-11-22 fiona-zhong

Vue有一个很方便的特性就是Vue的双向绑定，即响应式变化，在Vue2.X版本中，Vue响应式变化靠的是Object.defineProperty方法实现的，但是这个方法有个问题，就是对数组的支持不全面，如我们想要通过arr[0] = 11这种下标修改值的方式，Vue是不会监听并重新渲染组件的，以及arr.length = 0这种方式清空数组，也是不支持的。

那么在Vue中，是如何实现数据的双向绑定的呢？我们可以简单模拟一下。

实现原理就是：给数据绑定get/set方法，当修改对应的属性值时，会触发对应的get/set方法，在get/set方法中实现绑定逻辑。如果是数组，会重写数组的方法，如果是对象，会使用Object.defineProperty方法。

先定义一个最简单的对象obj

let obj = {

　　name:"Alice",

　　age:18

}

定义一个渲染函数

function render(){
     console.log("渲染")
}

给对象obj的每一个属性都绑定get/set方法

let handler = function(obj,key,value){
    Object.defineProperty(obj,key,{
        get(){
            return value;
        },
        set(newValue){
            if(value!==newValue){
                value = newValue;
                // 修改属性值时，调用渲染函数
                render();
            }
        }
    });
}

调用handler方法给obj的属性绑定get/set

function observe(obj){
    for(let k in obj){
        handler(obj,k,obj[k])
    }
}
observer(obj);
obj.name = "Fiona"   // 此时修改obj的属性值，会触发name的set方法，然后调用render函数，重新渲染

上面介绍了最简单的对象的数据双向绑定逻辑，那如果我们的对象中的属性值又是一个对象呢？如下

obj = {

　　name:{"name1":"Alice"}

}

这时候，我们给name绑定了get/set方法，但是name1并没有绑定，所以我们在使用obj.name.name1 = "Fiona"的时候，是没有办法触发name1的set方法的。

我们再对上面的方法进行改进：

var handler = function(obj,key,value){
    // value可能还是对象，所以需要再次给它绑定get/set方法
    observe(value);
    Object.defineProperty(obj,key,{
        get(){
            return value;
        },
        set(newValue){
　　　　　　　// 设置的值，可能还是一个对象，所以需要将设置的值的对象属性也绑定get/set方法

　　　　　　　observe(value);

if(value !== newValue){
                value = newValue;
                render();
            }
        }
    })
}

function observe(obj){
    if(typeof(obj)!=="object" || obj === null){
        return obj
    }
    for (let k in obj){
        handler(obj,k,obj[k]);
    }
}

observe(obj);
obj.name.name1 = ‘Fiona‘; //此时会触发name1的set方法，调用render()
obj.age = {"age1":19}
obj.age.age1 = 20

到这里，对象【非数组】的响应式变化就完成了，但是这里还有一个问题，就是如果想要给对象新增一个属性，也是不会触发的

如上面的obj，想给它新增一个gender，是不会触发set方法的，想要给对象新增属性同时触发set方法，需要使用$set方法

vm.$set(obj,newProperty,value)

 

接下来我们再看看数组的响应式变化的实现

数组需要重写数组的所有方法。但是还是不支持数组的长度变化，也不支持通过数组的下标修改值的方法

数组常用的方法有7个：pop,   push,   shift,   unshift,   splice,   sort,   reverse

// 数组的常用方法
let methods = [‘pop‘,‘push‘, ‘shift‘, ‘unshift‘, ‘splice‘, ‘sort‘, ‘reverse‘];

// 数组原型链上的方法
let ArrayProto = Array.prototype
// 我们需要重写数组的所有方法，但是又不能影响原有的原型链，所以这里需要将原型链重新拷贝一份
let proto = Object.create(ArrayProto);

// 循环数组的所有方法，给拷贝的原型链复制
methods.forEach(fn=>{
    proto[fn] = function(){
        // 调用原有原型链的方法
        ArrayProto[fn].call(this, ...arguments);
    }
}

// 定义渲染函数
function render(){
    console.log("渲染...")
}

var handler = function(obj, key, value){
    observe(obj);
    Object.defineProperty = function(obj, key, {
        get(){
            return value;
        },
        set(newValue){
            observe(newValue);
            if(value != newValue){
                value = newValue;
                render();
            }
        }
    })
}

function observe(obj){
    if(Array.isArray(obj)){
        // 如果obj是数组，将我们自定义的原型链复制给obj的原型链
        obj.__proto__ = proto;
        return;
    }
    if(typeof(obj) !=="object" || obj===null){
        return obj;
    }
    for(let k in obj){
        handler(obj, k, obj[k]);
    }
}

 到这里，数组的响应式变化也就完成了

let obj = [1,2,3];

observer(obj);

obj.push(4); // 这是，会直接调用自定义原型链的push方法，并调用render

 

let obj = {

　　name:["alice"],

}

observe(obj)

 obj.name.push("fiona")

 

前面说了，使用defineProperty会有两个问题，数组的长度改变和数组下标赋值这种修改数组的方法是不会被监听的，所以Vue3.x说会使用proxy来实现数据的绑定，可以解决这两个问题，但是proxy的兼容性是一个问题。

 下面简单看一下，如何使用proxy实现数据的响应式

let obj = {
    name:"Fiona",
    loc:{x:100,y:200},
    arr:[1]
}

function render(){
    console.log("渲染...")
}

let handler = {
    get(target, key){
        // 如上面的loc，value还是一个对象，所以需要再次进行绑定
        if(typeof(target[key] ===‘object‘ && target[key] !==null)){
            return new Proxy(target[key],handler)
        }
        return Reflect.get(target, key);
    },
    set(target, key, value){
        render();
        Reflect.set(target, key, value);
    }
}

// 给obj设置代理，绑定get/set方法
let proxy = new Proxy(obj, handler);

// 此时应该使用proxy去修改obj属性值，使用obj是无效的
proxy.arr.push(2)
proxy.arr.length=0
proxy.loc.x=200