vue3.0面试篇

2020年9月18发布正式版（rc共13版）!

1. Vue 3.0 变化

1、重写双向绑定

vue2基于Object.defineProperty()实现；vue3 基于Proxy
proxy与Object.defineProperty(obj, prop, desc)方式相比有以下优势：

• 省去for in 循环，代码更简化
• 可以监听动态新增和删除的属性；
• 可以监听数组的索引和 length 属性变化；

2、Vue3 优化Vdom

• vue2中的虚拟dom是进行全量的对比（不管dom有没有发生变化，都要进行对比；)
• 静态提升(hoistStatic),所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,每次的渲染被不停的复用。
• patch flag, 在动态标签末尾加上相应的标记,只能带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历，提高了虚拟dom diff的性能。
• 缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数
• tree shaking 优化核心库体积,减少不必要的代码量

3、Vue3 Fragment

• vue3 允许我们支持多个根节点
• 同时支持render JSX 写法
• List item同时新增了Suspense teleport 和 多 v-model 用法

4、Vue3 Tree shaking

• vue3移除了一些不常用的api，例如：inline-template、filter等 使用tree-shaking
• 在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到
• 而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中，不会给你打包减少体积

5、composition Api

• Options Api包含data、methods、props等 ，开发复杂组件，同一个功能逻辑的代码被拆分到不同选项 ；使用mixin重用公用代码，也有问题：命名冲突，数据来源不清晰；
• vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑。解决options api在大型项目中，不好拆分和重用的问题。

6、源码使用TS重新编写,更好的支持TS