关于vue.js:Vue2响应式原理

染陌同学 -《分析 Vue.js 外部运行机制》作者。阿里巴巴团体前端工程师

看了两章受益匪浅。

响应式原理

将数据 data 变成可察看（observable）的

function observe(value, cb) {Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}

function defineReactive (obj, key, val, cb) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
            /*.... 依赖收集等....*/
            /*Github:https://github.com/answershuto*/
            return val
        },
        set:newVal=> {
            val = newVal;
            cb();/* 订阅者收到音讯的回调 */}
    })
}

class Vue {constructor(options) {
        this._data = options.data;
        observe(this._data, options.render)
    }
}

let app = new Vue({
    el: '#app',
    data: {
        text: 'text',
        text2: 'text2'
    },
    render(){console.log("render");
    }
})

代理

其实 vue3.0 里也是 proxy 代替了 Object.defineProperty。

_proxy.call(this, options.data);/* 构造函数中 */

/* 代理 */
function _proxy (data) {
    const that = this;
    Object.keys(data).forEach(key => {
        Object.defineProperty(that, key, {
            configurable: true,
            enumerable: true,
            get: function proxyGetter () {return that._data[key];
            },
            set: function proxySetter (val) {that._data[key] = val;
            }
        })
    });
}