【vue3js.cn】Vue3 系列

原文：https://vue3js.cn/interview/vue3/goal.html

1. Vue3.0的设计目标是什么？做了哪些优化

• 更小
• 更快
• TypeScript支持
• API设计一致性
• 提高自身可维护性
• 开放更多底层功能

2. Vue3.0性能提升主要是通过哪几方面体现的？

编译阶段 回顾Vue2，我们知道每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知watcher，从而使关联的组件重新渲染

源码体积 相比Vue2，Vue3整体体积变小了，除了移出一些不常用的API，再重要的是Tree shanking

任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小

响应式系统 vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历

• 可以监听动态属性的添加
• 可以监听到数组的索引和数组length属性
• 可以监听删除属性

3. Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？

Object.defineProperty只能遍历对象属性进行劫持

Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的

Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9

4. Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

• 在逻辑组织和逻辑复用方面，Composition API是优于Options API
• 因为Composition API几乎是函数，会有更好的类型推断。
• Composition API对 tree-shaking 友好，代码也更容易压缩
• Composition API中见不到this的使用，减少了this指向不明的情况
• 如果是小型组件，可以继续使用Options API，也是十分友好的

5. 说说Vue 3.0中Treeshaking特性？举例说明一下？

通过Tree shaking，Vue3给我们带来的好处是：

• 减少程序体积（更小）
• 减少程序执行时间（更快）
• 便于将来对程序架构进行优化（更友好）