vue3.x 面试题 - Vue3.x 相对于 Vue2.x有哪些变化

源码组织方式的变化

使用 typescript 重写

Composition Api

Options Api

包含一个描述组件选项（data, method, props 等）的对象
Options Api 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项

Composition Api

1. vue.js 3.x 新增的一组 API
2. 一组基于函数的API
3. 可以更灵活的组织组件的逻辑

性能提升

响应式系统升级

1. vue.js 2.x 中响应式系统的核心 defineProperty
2. Vue.js 3.x 中使用 proxy 对象重写响应式系统
   1. 可以监听动态新增的属性
   2. 可以监听删除的属性
   3. 可以监听数组的索引和length属性

编译优化

1. vue.js 2.x 中通过标记静态根结点，优化 diff 的过程

2. vue.js 3.x 中标记和提升所有的静态根节点，diff 的时候只需要对比动态节点的内容

   1. Fragments （升级 vetur 插件）
   2. 静态提升
   3. Patch flag
   4. 缓存事件处理函数
   

优化打包体积

1. vue.js 3.x 移除了一些不常用的 API； 例如 inline-template filter 等
2. Tree-shaking

Vite

1. vite 在开发模式下不需要打包可以直接运行，而 vue-cli 在开发模式下必须对项目打包才可以运行

   1. 快速冷启动
   2. 按需编译
   3. 模块热更新
   

2. vite 在生产环境下使用 Rollup 打包，基于 ES Module 的方式打包，而 vue-cli 使用webpack 打包