Vue 3.0 问题集合

1. Vue 3.0 与 Vue 2.0 的区别

利用新的语言特性（ES6)，解决架构问题

• 速度更快 ( 重写了虚拟 Dom 实现，编译模块的优化，更高效的组件初始化，update 性能提高 1.3 ~ 2 倍，SSR 速度提高了 2 ~ 3 倍 )
• 体积减少 （tree-shaking 功能）
• 更易维护 （更好的 Typescript 支持）
• 更接近原生
• 更易使用

2. Vue 3.0 性能提升主要是通过哪几方面？

1）编译阶段

• diff 算法优化 （在会发生变化的地方添加一个 flag 标记，下次发生变化的时候直接找该处进行比较）
• 静态提升 （对不参与更新的元素，会做静态提升，智慧创建一次，在渲染时直接复用）
• 事件监听缓存
• SSR 优化

2) 源码体积

Tree shanking

3) 响应式系统

vue2 中采用 Object.defineProperty 来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加 getter 和 setter ，实现响应式

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

Vue 3.0 所采用的 Composition Api 与 Vue 2.0 使用的 Options Api 有什么不同

Composition Api ，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚、低耦合），可以优化代码组织

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

说说 Vue 3.0 中的 Treeshaking 特性？

Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术

好处：

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

用 Vue 3.0 写过组件吗？