Vue3.0五问五答

1、Vue 3.0 性能提升主要是通过哪几方面体现的？

响应式系统升级

首先来看一下响应式系统升级。我们都知道Vue2的时候，数据响应式的原理使用的是defineProperty，在初始化的时候会遍历data中的所有成员。通过defineProperty，把对象的属性转换成getter和setter。如果data中的属性又是对象的话，需要递归处理每一个子对象的属性。注意这些都是在初始化的时候进行的。也就是说如果你没有使用这个属性的时候，你也把它进行了响应式的处理。

而Vue3中采用的是ES6以后新增的proxy对象。proxy对象的性能本身就比defineProperty要好。另外，代理对象可以拦截属性的访问、复制、删除等操作。不需要初始化的时候遍历所有的属性。另外，如果有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性，使用proxy对象默认就可以监听到动态添加的属性。而Vue2里边想要动态添加一个显示的属性需要调用this.$set的方法来处理。而且Vue2中还监听不到属性的删除，对数组的索引和length属性的修改也监听不到。Vue3中使用代理对象可以监听属性的删除以及数组的索引和length属性的修改操作。所以Vue3中使用proxy对象提升了响应式系统的性能和功能。
- Vue 2.x中响应式系统的核心是defineProperty
- Vue 3.0中使用Proxy对象重写响应式系统
  - 可以监听动态新增的属性
  - 可以监听删除的属性
  - 可以监听数组的索引和length属性
编译优化

Vue3中通过优化编译的过程和重写虚拟DOM，让首次渲染和更新的性能有了大幅度的提升。我们知道Vue2的时候，模板首先需要编译成render函数，这个过程一般是在构建的过程中完成的。在编译的时候会编译静态根节点和静态节点。静态根节点要求节点中必须有一个静态子节点，当组件的状态发生变化后，会通知watch触发watcher和update。最终去执行虚拟DOM的patch操作遍历所有的虚拟节点，找到差异，然后更新到真实DOM上。
Diff的过程中会去比较整个虚拟DOM，先对比新旧的div以及它的属性，然后再对比它内部的子节点。Vue2中渲染的最小单位是组件。Vue2中diff的过程会跳过静态根节点，因为静态根节点的内容不会发生变化，也就是Vue2中通过标记静态根节点优化了diff的过程。但是在Vue2的时候，静态节点还需要再进行diff，这个过程没有被优化。

Vue3中为了提高性能，在编译的时候会标记和提升所有的静态节点，然后diff的时候只需要对比动态节点的内容。另外在Vue3中新引入了一个Fragments，也就是片段的特性，模板中不需要再创建一个唯一的根节点模板，里边可以直接放文本内容或者很多同级的标签。

在Vs code中需要升级你的Vetur插件，否则模板中如果没有唯一的根据点VS Code依然会提示有错误。

左边是我们刚刚看到的组件模板中的内容，右边是我们编译之后的render函数，但是这个编译的结果跟Vue2会有很大的区别，首先这里调用_createBlock给我们的根div创建了一个block，它是一个树的结构，然后通过createVNode的去创建了我们的子节点，那这里的createVNode的其实就是类似于我们之前的h函数。

那我们来删除这里面的根节点，来看一下它的变化。

当我们删除根节点之后，这里会创建一个fragment，也就是我们之前说的片段。其实从这里还可以看到，它内部还是维护了一个树形的结构，那么最外层是fragment，里边是我们的这些VNode的。
Vue 2.x中通过标记静态根节点，优化diff的过程
- Vue 3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
  - Fragments（升级vetur插件）
  - 静态提升
  - Patch flag
  - 缓存事件处理函数
源码体积的优化
- Vue 3.0中移除了一些不常用的API（如inline-template、filter等）
- Tree-shaking

2、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

Options Api中可以发现要实现一个功能，需要在不同选项中添加。如果此时需要在添加一个功能，就需要在多个选项中添加代码。并且难以提取组件中重复的代码。

Options API（Vue 2.x）
- 包含一个描述组件选项（data、methods、props等）的对象
- Options API开发复杂组件，同一个功能逻辑的代码被拆分到不同选项
- Options API难以提取组件中可重用的逻辑，虽然有mixin，但容易命名冲突，数据来源不清晰。
Composition API（Vue 3.0）
- Vue 3.0新增的一组API
- 一组基于函数的API
- 可以更灵活的组织组件的逻辑
- Compisition API可以看到将功能封装到一个函数内部，如果需要再增加一个功能，只需要再封装一个函数，然后在setup函数中调用函数。

3、Proxy 相对于 Object.defineProperty 有哪些优点？

首先来看一下响应式系统升级。我们都知道Vue2的时候，数据响应式的原理使用的是defineProperty，在初始化的时候会遍历data中的所有成员。通过defineProperty，把对象的属性转换成getter和setter。如果data中的属性又是对象的话，需要递归处理每一个子对象的属性。注意这些都是在初始化的时候进行的。也就是说如果你没有使用这个属性的时候，你也把它进行了响应式的处理。

而Vue3中采用的是ES6以后新增的proxy对象。proxy对象的性能本身就比defineProperty要好。另外，代理对象可以拦截属性的访问、复制、删除等操作。不需要初始化的时候遍历所有的属性。另外，如果有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性，使用proxy对象默认就可以监听到动态添加的属性。而Vue2里边想要动态添加一个显示的属性需要调用this.$set的方法来处理。而且Vue2中还监听不到属性的删除，对数组的索引和length属性的修改也监听不到。Vue3中使用代理对象可以监听属性的删除以及数组的索引和length属性的修改操作。所以Vue3中使用proxy对象提升了响应式系统的性能和功能。

4、Vue 3.0 在编译方面有哪些优化？

Vue3中通过优化编译的过程和重写虚拟DOM，让首次渲染和更新的性能有了大幅度的提升。我们知道Vue2的时候，模板首先需要编译成render函数，这个过程一般是在构建的过程中完成的。在编译的时候会编译静态根节点和静态节点。静态根节点要求节点中必须有一个静态子节点，当组件的状态发生变化后，会通知watch触发watcher和update。最终去执行虚拟DOM的patch操作遍历所有的虚拟节点，找到差异，然后更新到真实DOM上。
Diff的过程中会去比较整个虚拟DOM，先对比新旧的div以及它的属性，然后再对比它内部的子节点。Vue2中渲染的最小单位是组件。Vue2中diff的过程会跳过静态根节点，因为静态根节点的内容不会发生变化，也就是Vue2中通过标记静态根节点优化了diff的过程。但是在Vue2的时候，静态节点还需要再进行diff，这个过程没有被优化。