vue响应式的原理

要点

• observe() 方法: 使用 defineReactive() 劫持所有数据

  • defineReactive() 就是对 Object.defineProperty() 的封装

• Dep: 收集依赖 / 通知依赖数据更新了

  • 收集依赖用的是 dep.depend()

  • 通知依赖用的是 dep.notify()

• Watcher: 更新渲染视图

举个例子

• Vue 响应式的原理是什么?

  • 响应式的原理分为大概五个阶段, 首先数据初始化会进行数据劫持, 挂载阶段会进行依赖收集, 修改数据会进入到更新阶段, 要通知 Watcher 更新视图, 最后进行 DIFF 对比, 下面我给您详细介绍一下五个阶段分别做了哪些事情:

    • 数据初始化阶段new Vue() 的时候会执行 observe() 方法, 对所有的数据 (data / props) 进行劫持, 原理用的就是 defineReactive() 方法, 这个方法就是对 Object.defineProperty() 的封装

    • 挂载阶段时, 会创建一个 Watcher 将虚拟 DOM 渲染成真实 DOM, 而渲染的过程一定会进行模板解析, 就会访问到数据

    • 只要访问到数据, 就会触发数据的 get 方法, 此时调用 dep.depend()进行依赖收集, 所谓的依赖收集就是记录一下哪些 Watcher 用了我这个数据, 这个收集的最小单位是组件, 而 Vue1.x 最小单位是 DOM 元素

    • 只要数据发生变化, 就会触发数据的 set 方法, 此时调用 dep.notify()进行通知更新, 通知所有的 Watcher 进行 UI 渲染

    • 此时 Watcher 就会执行 render() 进行虚拟 DOM 构建, 调用 patch() 方法进行 DIFF 对比更新

    • 注意: DIFF 算法是一边比较一边更新页面, 不是比较完后一起更新