vue3.0设计

设计思想

• 模块化拆分

  在Vue2.0中无法单独使用部分模块。假如只想使用响应式部分，需要引入完整的Vuejs；而在Vue3中将模块进行了拆分，模块可以单独使用。

• 重写API

  在Vue2.0中你可能用不到的很多方法都挂载到了实例上，如vue.nextTick,vue.component等，导致没有使用也会被打包；Vue3.0中将这些方法单独抽离出来，写成了一个个的方法，通过构建工具Tree-shaking机制实现按需引入，减少打包体积。

  举个栗子

   // nextTick API重写之后通过引入的方式使用，如果没有用到，就不会出现在打包后的代码里
   improt { nextTick } form "vue";
  

• 自定义渲染器

  在vue2中，假如需要基于源代码进行改良，这时候需要 fork 一下，然后去改源码，扩展能力较差；在 vue3 中，将创建函数 createRenderer 方法单独分离出来，这样更好的实现多平台应用。

声明式框架

vue3 任然是声明式框架，使用简单。

0. 声明式相当于命令式的封装。
1. 声明式代码性能 >= 命令式代码性能。
2. 声明式代码可维护性更强。

采用虚拟DOM

在vue1.0时并没有采用虚拟DOM的方式，此时发现性能并不好；原因是当需要整个完全重新渲染，需要更新大面积的Dom，导致的性能差；采用虚拟Dom的方式；相当于做了一层缓存，比较前后的虚拟节点，对差异部分局部更新，减少性能消耗；这也是所谓Diff算法。

0. 理论上虚拟Dom性能 < 原生JS操作Dom（原因是虚拟Dom本质上就是在原生JS操作Dom,只不过在此之前加了一堆算法JS）
1. 当需要有操作大量Dom操作时，虚拟Dom > 原生JS

区分编译时和运行时

vue3延用编译时和运行时

编译时：模板=>虚拟Dom

运行时：虚拟Dom=>真实Dom

在开发中我们并不需要编写虚拟dom对象，而是直接操作模板(template),类似写HTML；“模板编译”的都是在构建工具里做的，比如在构建时，通过vite将Dom都编译好(模板的翻译工作)，这就是所谓的编译时；编译之后渲染器拿到编译的结果来去运行，这就是运行时。Vue将这部分功能进行了区分，一个叫运行时，另一个叫运行时；在vue源码中也是分为了两个包（编译时：如何将模板变为虚拟Dom；运行时：关注如何将虚拟Dom转化为真实Dom）。

最后一句

学习心得！若有不正，还望斧正。希望掘友们不要吝啬对我的建议。