vue中数据双向绑定的实现原理

浅谈vue的数据双向绑定

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
代码如下：

/**
 * 
 * @param {*} data   
 * @param {*} key 
 * @param {*} val 
 * 
 * vue数据双向绑定实现的原理：通过使用Object.defineProperty和es6中的proxy
 * 从data的key中读取数据，get函数会被触发，往data的key中设置数据时，set函数被触发
 */
function defineReactive(data, key, val) {
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get() {
            return val;
        },
        set(newVal) {
            if (newVal === val) {
                return;
            }
            val=newVal;
        }
    })
}