关于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;            }        })    });}