深入响应式原理

2022-05-11 196 阅读2分钟

Vue最独特的特性之一，是非侵入性的响应式系统。
数据模型仅仅是普通的Javascript对象；
当你修改他们时，视图会进行更新；

Vue响应式系统的底层细节

如何追踪变化

当你把一个普通的Javascript对象，传入Vue实例作为data选项，Vue将遍历此对象的所有property，并使用Object.defineProperty把这些property全部转为getter/setter。
这些getter和setter对用户来说不可见的；
但是在内部他们让Vue能够追踪依赖，在property被访问和修改时通知变更；
每个组件实例都会对应一个watcher实例，他会在组件渲染的过程中，把接触的数据property记录为依赖；
当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。

对于对象

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)
```
- 还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

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

声明响应式 property

由于 Vue 不允许动态添加根级响应式 property，所以你必须在初始化实例前声明所有根级响应式 property，哪怕只是一个空值：

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

如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的 property。