JS观察者模式--Vue双向绑定原理（Object.defineProperty）

一、定义对象

// 创建对象
var targetObj = {
    name:'小李'
}
var targetObj2 = {
    name:'小李'
}

二、定义一个观察者

用这个观察者去劫持数据

// 定义值改变时的处理函数（观察者）
function observer(oldVal, newVal) {
    // 其他处理逻辑...
    targetObj2.name = newVal
    console.info('targetObj2的name属性的值改变为 ' + newVal);
}

三、数据劫持

通过Object.defineProperty去劫持对象中数据的改变，当观察者获得数据改变时执行

// 定义name属性及其set和get方法（name属性为被观察者）
Object.defineProperty(targetObj, 'name', {
    enumerable: true,
    configurable: true,
    get: function() {
        return name;
    },
    set: function(val) {
        //调用处理函数
        observer(name, val)
        name = val
    }
});

结果

targetObj.name = '张三';
console.log(targetObj2.name)  //张三
targetObj.name = '李四';
console.log(targetObj2.name) //李四