Vue学习笔记

Vue

1. Vue 响应式原理

了解 Vue 三个核心类:

1. Observer: 给对象的属性添加 getter 和 setter，用于 依赖收集 和 派发更新
2. Dep: 用于收集当前响应式对象的依赖关系，每个响应式对象都有一个 dep 实例，dep.subs = watcher[]，当数据发生变更时，会通过 dep.notify() 通知各个 watcher 调用 update 方法更新
3. Watcher: 观察对象，render watcher，computed watcher，user watcher

• 依赖收集

1. initComputed，对 computed 属性初始化时，会触发 computed watcher 依赖收集
2. initState，对监听属性初始化时，触发的 user watcher 依赖收集
3. render，触发 render watcher 依赖收集

• 派发更新

1. 组件中对响应数据进行了修改，会触发 setter 逻辑
2. dep.notify()
3. 遍历所有 dep.subs，调用每个 watcher 的 updata 方法

总结：

当创建 vue 实例时，vue 会遍历 data 中的属性，通过 Object.defineProperty 为属性添加 getter 和 setter 对数据的读取进行劫持

getter: 依赖收集
setter: 派发更新

每个组件的实例都会有对应的 watcher 实例

2. 计算属性原理

computed watcher，计算属性的监听器

computed watcher 持有一个 dep 实例，通过 dirty 属性标记计算属性是否需要重新求值

当 computed 的依赖值改变后，就会通知订阅的 watcher 进行更新，对于 computed watcher 会将 dirty 属性设置为 true，并且进行计算属性方法的调用

缓存

计算属性是基于其响应式依赖进行缓存的，只有依赖发生改变时才会重新求值

应用

耗时操作、类型转换、格式转换

3. Vue.nextTick 原理

Vue 是异步执行 dom 更新的，数据一旦发生变化，会把同一个 event loop 中观察数据变化的 watcher 推送进这个队列

在下一次事件循环时，Vue 清空异步队列，进行 dom 的更新

应用

在数据变化后要执行某个操作，而这个给操作依赖因数据改变而改变的 dom，这个操作就应该被放到 vue.nextTick 回调中

// 回调函数形式
this.$nextTick(() => dosomething...);

// async await
async function() {
	await this.$nextTick();
	dosomething...
}