1. vue3的新特性
- 响应系统的变动
由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。 Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。
- 虚拟DOM重写（Virtual DOM Rewrite）
虚拟 DOM 从头开始重写，我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。
- 组件渲染的优化（优化插槽生成）
Vue2当中在父组件渲染同时，子组件也会渲染。 Vue3就可以单独渲染父组件、子组件。
- 静态树提升（Static Tree Hoisting）
使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。
- 静态属性提升（Static Props Hoisting）
此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。
- 总体来说：1. 更快 2. 更小 3. 更容易维护 4. 更加友好 5. 更容易使用
2. Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？
- defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。
这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因，在Vue中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到setter监听的，这是defineProperty的局限性。
- Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
- 响应式是惰性的
在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。
3. Proxy 相对于 Object.defineProperty 有哪些优点？
- proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
可以监听数组变化
可以劫持整个对象
操作时不是对原对象操作,是 new Proxy 返回的一个新对象
可以劫持的操作有 13 种
4. Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？
- Options Api
包含一个描述组件选项（data、methods、props等）的对象 options；
API开发复杂组件，同一个功能逻辑的代码被拆分到不同选项 ；
使用mixin重用公用代码，也有问题：命名冲突，数据来源不清晰；
- composition Api
vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑。
解决options api在大型项目中，options api不好拆分和重用的问题。
5. Vue3.0 编译做了哪些优化？
vue.js 3.x中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容；
Fragments（升级vetur插件): template中不需要唯一根节点，可以直接放文本或者同级标签
静态提升(hoistStatic),当使用 hoistStatic 时,所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点，随着每次的渲染被不停的复用。
patch flag, 在动态标签末尾加上相应的标记,只能带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历，提高了虚拟dom diff的性能。
缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数
tree shaking 通过摇树优化核心库体积,减少不必要的代码量
6. Vue3.0是如何变得更快的？
- diff方法优化
Vue2.x 中的虚拟dom是进行全量的对比。
Vue3.0 中新增了静态标记（PatchFlag）：在与上次虚拟结点进行对比的时候，值对比带有patch flag的节点，并且可以通过flag 的信息得知当前节点要对比的具体内容化。
- hoistStatic 静态提升
Vue2.x : 无论元素是否参与更新，每次都会重新创建。
Vue3.0 : 对不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用。
- cacheHandlers 事件侦听器缓存
默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。
7. Vue.js 3.0 响应式系统的实现原理？
- reactive
设置对象为响应式对象。接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理。
创建拦截器handerler，设置get/set/deleteproperty。
get
收集依赖（track）；
如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty；
如果当前的 key 的值不是对象，则返回当前 key 的值。
set
设置的新值和老值不相等时，更新为新值，并触发更新（trigger）。
deleteProperty
当前对象有这个 key 的时候，删除这个 key 并触发更新（trigger）。
- effect
接收一个函数作为参数。作用是：访问响应式对象属性时去收集依赖
- track
接收两个参数：target 和 key
-如果没有 activeEffect，则说明没有创建 effect 依赖
-如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性
-WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))
-WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性
-depsMap 中没有 key 属性，则 set(key, (dep = new Set()))
-depsMap 中有 key 属性，则添加这个 activeEffect
