- 响应式原理
- Vue类中实例化数据监听Observe(this.$data)、实例化模板解析Complier(this)
- Observer类中Object.defindProperty的get调用Def类中addSub进行依赖收集,set进行变更通知notify()
- Def类主要添加观察者addSub(),和通知变更notify()两种操作。作为Observer类和多个Watcher实例之间的桥梁。
- Watcher类中主要触发get进行依赖收集,和数据变化时更新视图update。
- 模板编译原理
- compile()循环判断是compileText文本节点or元素节点compileElement,有子节点则递归调用compile()
- 文本节点正则能匹配上模板表达式就用data属性值进行替换,并绑定上Watcher实例,变更更新
- 遍历元素节点所有的属性,判断有绑定v-开头属性,进行相应的解析,并绑定上Watcher实例,更新元素节点
- 虚拟Dom原理
- 虚拟Dom本质是js对象,是对真实Dom的抽象;状态变更时,记录新树与旧树的差异;最后将差异一次性更新到真实Dom上。
- 优点
- 避免多次操作真实Dom,减少不必要的重绘和回流,提高性能
- React借助虚拟Dom,实现跨平台的能力,一套代码多端使用。
- 计算属性原理
- computed watcher 计算属性的监听器
- computed watcher 持有一个dep实例,通过 dirty 属性标记计算属性是否需要重新求值
- 当computed的依赖值发生改变时,会通知订阅的 watcher 进行更新,对于computed watcher 会将 dirty 属性设置为true,并且进行计算属性方法的调用
- computed 所谓的缓存是指 计算属性是基于他的响应式依赖进行缓存的,只有依赖发生改变的时候才会重新求值
- Vue.nextTick的原理
- Vue是 异步执行 dom更新的,一旦观察到数据发生变化,把同一个event loop中观察数据变化的watcher推送进这个队列
- 在下一次事件循环时,Vue清空异步队列,进行dom的更新
- Promise.then > MutationObserver -> setImmediate > setTimeout
- 属性变化导致dom发生变化时,对ref进行操作时需用Vue.nextTick
vue2基础原理
于 2023-03-02 22:34:18 首次发布