前端知识点——Vue的响应式原理

写在前面

笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。

new Vue(options)

options

• el -> 一般是一个 id，也可以是一段html
• data -> 响应式数据
• lifecycle -> 生命周期
• computed -> 计算属性
• watch -> 监听器

data

• 将 data 中的数据绑定到 Vue 实例身上，这样可以通过 this 来进行访问(因为是对象的缘故，所以其后对 data 的响应式操作同样可以映射到 this 上绑定的 data 的值上)
• 调用 observe 将 data 中的数据都具有 getter 和 setter
• observe 需要判断 data 类型，如果是数组就需要改写其数组方法
• 对于数组方法的改写需要先从数组原型中找到要改写的方法，然后重新定义，在 getter 中获取 arguments 可以找到插入的新数据( push、unshift )，为其做响应式处理，然后再返回原来的数组方法调用
• 数组方法本身属于 setter，所以虽然重新定义数组方法是使用了 getter，但是依然要在返回原数组方法调用前触发依赖
• 在定义响应式的时候需要在 getter 中收集依赖，在 setter 中触发依赖

watch

• 首先需要先 new Watcher 一个响应式变量，其 constructor 中需要 data 和 key 两个值
• 调用 constructor ，其中会调用一个 get 方法获取到 value，get 方法会走到需要取得值的 getter 方法内，所以需要在取值前将 Dep 的 target 设置为 Watcher 本身
• 进入 getter，Dep.target 存在，Dep 中添加 sub
• 退出 getter，将 Dep.target 设置为 null

class Vue

• constructor -> 数据响应式 + 模板编译
• _initData
• _initComputed
• _initWatch

function defineReactive

• 使用 Object.defineProperty 为数据添加响应式
• 判断是否有子数据
• 在 getter 中收集依赖
• 在 setter 中触发依赖

class Observer

• constructor -> 判断数据类型，并为数据添加 ob 属性指向自身，方便之后的调用
• walk
• observeArray

property ( 也可以算是 prototype ) arrayMethods

• 修改 methodsNeedChange 内定义的原生数组方法
• 获取新增的值并为其添加响应式
• 触发依赖

const methodsNeedChange = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

class Dep

• constructor -> 依赖缓存
• addSub
• depend
• notify

class Watcher

• constructor -> 进行一次数据获取，并且埋下 dep( dep.depend )
• update
• get
• run
• getAndInvoke
• function parsePath(expression) 解析 key 的路径，例如 object.item.title