vue部分底层原理

vue部分底层原理

• 响应式原理
  • Vue类中实例化数据监听Observe(this.$data)、实例化模板解析Complier(this)
  • Observer类中Object.defindProperty的get调用Def类中addSub进行依赖收集，set进行变更通知notify()
  • Def类主要添加观察者addSub()，和通知变更notify()两种操作。作为Observer类和多个Watcher实例之间的桥梁。
  • Watcher类中主要触发get进行依赖收集，和数据变化时更新视图update。(一个key属性有多个 watcher 依赖；一个watcher表示一个 dom节点 的依赖及更新)

• 模板编译原理
  • 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