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'    });