vue的响应式原理

vue响应式原理

vue式基于Object.defineProperty 来实现数据响应的, ie8不支持该方法
Object.defineProperty设置了get/set方法来访问属性，set和get为属性访问器

var book = {
    _year : 2018,
    edition : 1
};
Object.defineProperty(book,"year",{ 
    get : function () {
        alert(this._year);
    },
    set : function (newValue) {
        if (newValue > 2018) {
            this._year = newValue;
            this.edition += newValue - 2018;
        }
    }
});
book.year;      // 显示 2018
book.year = 2019;
console.log(book.edition);   // 2

• 每次获得属性和设置属性都会执行相对应的get/set
  方法
  vue实例在组件渲染页面时，会先把当前组件中所依赖的数据存储起来，而其中的Watcher是监视这是数据的，每当数据发生改变时，就会触发watcher，当watcher监听到了数据的变化时，就会去通知组件，
  让组件重新渲染页面

Vue 无法检测到对象属性的添加或删除

var vm = new Vue({ 
data:{ a:1 }
}) 
// `vm.a` 是响应式的 
vm.b = 2
// `vm.b` 是非响应式的

b是在vm实例创建之后添加的属性，所以他不是响应式的.改变b的值对视图没有任何影响,而改变a的值能更新视图层

1、方案一：利用Vue.set(object,key,value)

2、方案二：利用this.$set(this.object,key,value)

3、方案三：利用Object.assign({},this.obj)

声明响应式属性

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值
当访问响应式属性必须在data中声明改属性，