vue.js学习笔记（四）--变化检测问题

版权声明：本文为博主原创文章，转载请注明出处。如对文章知识有关问题欢迎评论和右侧chat快问提出。 https://blog.csdn.net/sir1241/article/details/76039072

博客地址：https://fisher-zh.github.io

Vue追踪变化是通过把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
当我们在声明一个实例的过程中，所有的属性必须要在data中提前声明，只有在data中声明的属性才是响应式的。

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

同时，如果某个属性是一个object对象，那么你也不能直接在其上进行属性的操作，这是因为

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

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

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

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

有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：

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

(end)