共计 1995 个字符，预计需要花费 5 分钟才能阅读完成。
如何追踪变动
我的项目中遇到了更新了数据，然而页面不更新还是显示旧数据的问题
首先艰深的解释一下响应式：响应式的(就是数据和页面展现同时更新)
非响应式的（就是 vue 中的数据尽管更新了，然而页面显示还是旧数据）当你把一个一般的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并应用 Object.defineProperty 把这些 property 全副转为 getter/setter。Object.defineProperty 是 ES5 中一个无奈 shim 的个性，这也就是 Vue 不反对 IE8 以及更低版本浏览器的起因。
这些 getter/setter 对用户来说是不可见的，然而在外部它们让 Vue 可能追踪依赖，在 property 被拜访和批改时告诉变更。这里须要留神的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以倡议装置 vue-devtools 来获取对检查数据更加敌对的用户界面。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会告诉 watcher，从而使它关联的组件从新渲染。
检测变动的注意事项
因为 JavaScript 的限度，Vue 不能检测数组和对象的变动。尽管如此咱们还是有一些方法来回避这些限度并保障它们的响应性。
对于对象
Vue 无奈检测 property 的增加或移除。因为 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在能力让 Vue 将它转换为响应式的。例如：
var vm = new Vue({
data:{
a:1}
})
// `vm.a` 是响应式的(就是数据和页面展现同时更新)**
vm.b = 2
// `vm.b` 是非响应式的（就是 vue 中的数据尽管更新了，然而页面显示还是旧数据）对于曾经创立的实例，Vue 不容许动静增加根级别的响应式 property。然而，能够应用 Vue.set(object, propertyName, value) 办法向嵌套对象增加响应式 property。例如，对于：
Vue.set(vm.someObject, 'b', 2)
您还能够应用 vm.$set 实例办法，这也是全局 Vue.set 办法的别名：
this.$set(this.someObject,’b’,2)
有时你可能须要为已有对象赋值多个新 property，比方应用 Object.assign() 或 _.extend()。然而，这样增加到对象上的新 property 不会触发更新。在这种状况下，你应该用原对象与要混合进去的对象的 property 一起创立一个新的对象。
// 代替 Object.assign(this.someObject, { a: 1, b: 2})
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2})
对于数组
Vue 不能检测以下数组的变动：
当你利用索引间接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你批改数组的长度时，例如：vm.items.length = newLength
举个例子：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']}
})
vm.items[1] = ‘x’ // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题，以下两种形式都能够实现和 vm.items[indexOfItem] = newValue 雷同的成果，同时也将在响应式零碎内触发状态更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
你也能够应用 vm.$set 实例办法，该办法是全局办法 Vue.set 的一个别名：
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题，你能够应用 splice：
vm.items.splice(newLength)
申明响应式 property
因为 Vue 不容许动静增加根级响应式 property，所以你必须在初始化实例前申明所有根级响应式 property，哪怕只是一个空值：
var vm = new Vue({
data: {
// 申明 message 为一个空值字符串
message: ''},
template: ‘<div>{{message}}</div>’
})
// 之后设置 message
vm.message = ‘Hello!’
如果你未在 data 选项中申明 message，Vue 将正告你渲染函数正在试图拜访不存在的 property。
