-
当你把一个普通的
JavaScript
对象传入Vue
实例作为data
选项,Vue
将遍历此对象所有的property
,并使用Object.defineProperty
把这些property
全部转为getter/setter
。
这些getter/setter
对用户来说是不可见的,但是在内部它们让Vue
能够追踪依赖,在property
被访问和修改时通知变更。 -
每个组件实例都对应一个
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
不允许动态添加根级别的响应式property
。但是,可以使用Vue.set(object, propertyName, value)
方法向嵌套对象添加响应式property
。例如,对于:Vue.set(vm.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' , {k:1}] } }) vm.items[1] = {a:1} // 不是响应性的 可以用vm.items[1].__ob__.dep.notify(); 触发上面的更新 vm.items.length = 2 // 不是响应性的 vm.items[3].k = 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)
-
由于
Vue
不允许动态添加根级响应式property
,所以你必须在初始化实例前声明所有根级响应式property
,哪怕只是一个空值:var vm = new Vue({ data: { // 声明 message 为一个空值字符串 message: '' }, template: '<div>{{ message }}</div>' }) // 之后设置 `message` vm.message = 'Hello!'
-
如果你未在
data
选项中声明message
,Vue
将警告你渲染函数正在试图访问不存在的property
。
这样的限制在背后是有其技术原因的,它消除了在依赖项跟踪系统中的一类边界情况,也使Vue
实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑:data
对象就像组件状态的结构 (schema)。提前声明所有的响应式property
,可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。