Vue 响应式实现原理（个人在学习完Vue基础的情况下的理解）

1. Vue 对象

1.1 用户看到的对象

var app = new Vue({
    el: '#app' , 
    /*
     * 用户看到的是这个对象
     */
    data: {
        name: 'chenxuelong' , 
        sex: 'male'
    }
});

// 即是
console.log(app.data);

1.2 Vue 实际使用的对象

// Vue 实际使用的对象
app.$data = {};

for (var k in app.data)
{
    copy(k);
}

// 复制
function copy(k){
    Object.defineProperty(app.$data , k , {
        get: function(){
            return app.data[k];
        } , 
        set: function(value){
            app.data[k] = value;
            
            // 更新相应 dom 的代码
        } ,
        enumerable: true , 
        configurable: true
    });
}

2. Vue 实现 data 对象代理

for (var k as app.$data)
{
    copy(k);   
}


function copy(k){
    Object.defineProperty(app , k , {
        get: function(){
            app.$data[k];
        } , 
        set: function(val){
            app.$data[k] = val;
        } , 
        enumerable: true , 
        configurable: true
    });
}

3. Vue 响应式原理

3.1 前提

Vue 官网说过，限于现代浏览器 JavaScript 限制，Vue 无法监测通过 app.test = 'hello boy' 这种方式添加的属性，所以，他的响应式是建立在实例化 Vue 对象的时候，预定义 data 属性的基础上的。

3.2 原理

// 必须在实例化 Vue 时，预定义好要用到的 data 属性
// 否则实现不了响应式
var app = new Vue(
    el: '#app' , 
    // 这个时候，Vue 内部会新建一个 $data 属性
    // 具体过程请看步骤 1.2
    // 然后实现 data 对象代理，具体过程请看
    // 步骤 2
    // 通过以上步骤后， data 对象中的数据属性
    // 就都被转化为 存取器属性（getter/setter） 了
    // Vue 就是通过 getter/setter 来追踪属性变化的
    data: {
        name: 'chenxuelong' , 
        sex: 'male'
    }
);