1、Vue 3.0 性能提升主要是通过哪几方面体现的？
响应式系统升级
使用 Proxy 代替之前的 Object.defineProperty,不仅在性能上更好，而且弥补了之前vue2在响应式上的缺点。在数据初始化的时候可以不用再却循环对象属性并设置监听，并且可以做到：
- 动态监听对象属性的新增、删除
- 监听数组的长度和索引
编译优化
Vue.js 2.x 中通过标记静态根节点，优化diff的过程
Vue.js 3.0 中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
- Fragments(升级vetur插件)
- 静态提升：不会被重复render
- Patch flag：跳过静态节点,直接对比动态节点
- 缓存事件处理函数
优化打包体积
- 移除了一些不常用的API 如：inline-template、filter
- 使用按需引入的方式，可以在打包的时候很好的实现Tree-shaking
2、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？
OptionApi：
包含一个描述组件选项（data、methods、props等）的对象
OPtion API 开发复杂组件，同一个功能逻辑的代码会被拆分到不同选项
Composition API
基于函数的API
可以更灵活的组织组件的逻辑
3、Proxy 相对于 Object.defineProperty 有哪些优点？
作为现在浏览器比较推荐的方式，proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
- 可以监听数组变化
- 可以劫持整个对象
- 操作时不是对原对象操作,是 new Proxy 返回的一个新对象
- 可以劫持的操作有 13 种
4、Vue 3.0 在编译方面有哪些优化？
- vue.js 3.x中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容；
- Fragments（升级vetur插件): template中不需要唯一根节点，可以直接放文本或者同级标签
- 静态提升(hoistStatic),当使用 hoistStatic 时,所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点，随着每次的渲染被不停的复用。
- patch flag, 在动态标签末尾加上相应的标记,只能带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历，提高了虚拟dom diff的性能。
- 缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数
- tree shaking 通过摇树优化核心库体积,减少不必要的代码量
