vue响应式原理--对了解父子组件通信很有帮助

我们都知道Vue通过MVVM思想实现数据的双向绑定，数据驱动页面视图。那它到底是如何进行双向绑定的呢？

 

只要在 Vue 实例中声明过的数据，这个数据就是响应式的。

什么是响应式，即，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。

那么我们就会思考： 

• vue怎么知道数据改变？
• vue怎么知道页面哪里的数据改变，需要重新渲染？
• vue怎么知道什么时候渲染合适？

这就涉及到Object.defineProperty。Vue 实现响应式的一个核心 API 是 Object.defineProperty。该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

基本用法：

const data = {}
const name = 'zhangsan'
Object.defineProperty(data, 'name', {
  get: function() { 
    console.log('get')
    return name
  },
  set: function(newVal) {
    console.log('set')
    name = newVal
  }
})


// 测试
console.log(data.name) // get zhangsan
data.name = 'lisi'     // set

使用 Object.defineProperty 可以为对象中的每一个属性，设置 get 和 set 方法 

 

那么 get 和 set 方法有什么用？

• get 值是一个函数，当属性被访问时，会触发 get 函数。

       data 中的声明的每个属性，都拥有一个数组（专属的依赖收集器 subs），保存着 谁依赖（使用）了 它。这样知道谁依赖他，就可以在其改变时，通知依赖他的页面进行更新。使用了 一个 dep 保存了 页面这个依赖，而保存的实际上是页面的 Watcher。

• set 值同样是一个函数，当属性被赋值时，会触发 set 函数。

      因而当数据改变时，触发 属性的 set 方法，Vue 就能知道数据有改变。当数据改变的时候，会遍历自己的依赖收集器 subs，逐个通知 watcher，让 watcher 完成更新。

关于如何监听 data 变化

共定义了三个函数：

• updateView：模拟 Vue 更新视图的入口函数。
• defineReactive：对数据进行监听的具体实现。想要深度监听，改变defineReactive方法即可。
• observer：调用该函数后，可对目标对象进行监听，将目标对象编程响应式的。

对于监听数组，是通过重写数组方法来实现 。

Object.defineProperty 缺点

• 深度监听时，需要递归到底，一次性计算量大
• 无法监听新增属性/删除属性（所以开发中需要使用 Vue.set 和 Vue.delete 这两个 API 来增删 data 的属性）
• 无法原生监听数组，需要特殊处理