vue3源码分析

编程范式

• 命令式：关注过程的一种编程范式，描述了完成一个功能的纤细逻辑与实现
  • 性能好
• 声明式：不关注过程只关注结果
  • 可维护性强
  • 开发成本（开发周期）、开发体验（心智负担）

vue 框架设计原则

vue 封装了命令式的逻辑，而对外暴露了声明式的接口；
vue 在可维护性和性能之间进行取舍，找到平衡点，在保证可维护性的基础上，尽可能的减少性能的损耗

vue 组件挂载时会发生如下几件事：

• 编译：vue 模板会被编译为渲染函数（就是用来返回虚拟 DOM 树的函数）
• 挂载：运行时渲染器会调用渲染函数，遍历返回虚拟 DOM 树，基于虚拟 DOM 树创建实际的 DOM 节点，此过程会追踪所用到的所有响应式依赖
• 更新：当依赖发生改变后，副作用会重新执行，创建一个更新后的虚拟 DOM 树，然后运行时会将新旧两颗虚拟 DOM 树进行对比，将必要的更新应用到真实 DOM 节点

带编译时信息的虚拟 DOM

vue 中，框架同时控制着编译器和运行时，所以可以通过带编译时信息的虚拟 DOM 做很多编译时优化，例如静态提升、动态类型标记、树结构打平等

react 的实现是纯运行时的，所以 react 的更新算法无法预知新的虚拟 DOM 树会是怎样，所以每次更新总是需要遍历整棵树、对比每个 vnode 上的 props 的区别来更新节点，尽管 DOM 树中有些静态节点不会改变，但在每次重新渲染还会创建新的 vnode，带来了大量不必要的内存压力