深入响应式原理

响应式原理作为Vue最独特的特性之一，是需要我们前端开发者重点了解和学习的。当你修改对象的数据时，它能对渲染在浏览器上面的页面进行实时更新。这就让开发者们更加简单地，直接地进行开发。所以，为了更好的使用vue，避免一些开发中出现的问题，我们需要更加深入的了解其工作原理。

 vue是如何追踪数据的变化的
如果把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue会历经这个对象的所有属性，而且 Object.defineProperty 会把这些属性转化为getter/setter。
但是 Object.defineProperty是ES5中无法读取的属性，所以Vue是不能运行I在E8以及更低的版本的浏览器上。

1. 这里我们说下getter/setter
getter/setter 用户是不可见的，但是能够通过Vue去对他们进行追踪依赖，在 Object.defineProperty 属性被访问或是修改时，会通知变更。这里建议安装浏览器工具 vue-devtools 来对检查的数据进行更加清楚直观化的分析（因为浏览器的不同会影响控制台的对象数据打印）。

2. watcher实例
 每一个组件都有一个与自身相对应的watcher实例，它会记录下该组件在渲染过程中getter到的数据，并把它作为依赖。在后续的依赖项上触发setter时，就会通知watcher，让与之相关联的组建在页面上重新渲染。

 注意事项
1. Vue无法检测到对象属性的添加和删除。
- 因为Vue在new了一个实例是，就会对属性执行getter/setter的转化，所以属性必须在 data 对象上才能被Vue检测到转化为响应式。

var vm = new Vue({
data:{
a:1
//如果在控制台修改vm.a=11,会修改成功
}
})
vm.b=2//如果在控制台修改vm.b=11,不会修改成功

 

那如果有需要的话要怎么对b这个属性变为响应式呢？

         1.使用Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
            

Vue.set(vm.someObject, 'b', 11)

       2. 还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名

this.$set(this.someObject,'b',2)

 

        3.为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

3.声明响应式属性

   前面讲了：要使用Vue的响应式，就要在data中先声明好，如果暂时没有值，在之后的代码编写中药用的话，我推荐你可以先声明一个空值。

var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message` 也可使用
vm.message = 'Hello!'

 

这样的好处是：增强了代码的可维护性，代码更加一目了然，可以然后续的工作者，看到data的数据就能分析出数据的组成。

转载于:https://www.cnblogs.com/pananing/p/10942344.html