第四题：Vue2.0和Vue3.0的区别
总览
- Vue3.0采用更高效的虚拟DOM算法
- 引入组合式API
- 支持TypeScript
- 数据响应式系统得到改进
- 搭建打包工具使用 Vite
- 生命周期有所改进
1、项目架构
项目搭建和打包工具：
Vue2.0使用WebPack或vue-cli进行项目搭建打包（成熟稳定、支持插件化自定义，但配置复杂耗费时间精力）
Vue3.0使用Vite新型前端构建工具，提升速度简化过程
架构思路和实现方式
Vue2.0采用大象 monolithic（庞大而单一的） 系统架构模式。加载慢、模块化能力弱、难以维护
Vue3.0使用 组合式API + TypeScript 的方式设计实现。更灵活的进行组件开发和复用，TS在编译阶段发现潜在问题。更便于组件化模块化管理
2、数据相应式系统
Proxy替换Object.defineProperty Vue 3.0使用了ES6中的Proxy代理对象来替代Object.defineProperty()方法。Proxy对象可以拦截对象上的一些操作，比如读取、修改、删除等，从而实现更加灵活的响应式更新。
3、虚拟DOM
Vue3.0生命周期
setup 替代了beforCreated created，用于创建实例
onBeforeMount：在挂载之前被调用，与 Vue 2.0 中的 beforeMount 类似
onMounted：在挂载之后被调用，与 Vue 2.0 中的 mounted 类似
onBeforeUpdate：在更新之前被调用，与 Vue 2.0 中的 beforeUpdate 类似
onUpdated：在更新之后被调用，与 Vue 2.0 中的 updated 类似
onBeforeUnmount：在卸载之前被调用，与 Vue 2.0 中的 beforeDestroy 类似
onUnmounted：在卸载之后被调用，与 Vue 2.0 中的 destroyed 类似
4、Diff算法
在 Vue 2.0 中，diff 算法是通过比较新旧虚拟 DOM 树来确定必须更新的 DOM 元素的最小集合。这个过程涉及到 DOM 树的遍历和对比，非常消耗性能，尤其是在更新大量数据时，会带来性能瓶颈。
Vue 3.0 中的 diff 算法进行了改进和优化，采用了编译时优化的动态标记，并使用静态分析技术来确定哪些节点是静态的，哪些是动态的。这样，在进行 diff 比较时，只需要对动态节点进行比较，避免了对静态节点的不必要操作，从而提高了性能。
Vue 3.0 中的 diff 算法还引入了「静态节点提升」的优化，即将静态节点从渲染函数中提取出来，以减少冗余的 DOM 操作。这个技术可以减少虚拟 DOM 的创建和比较次数，从而提高性能。
此外，Vue 3.0 引入了 Block Tree，通过在编译期预处理模板，可以将整个模板划分成多个块，每个块拥有自己的特定标识，使得在进行 diff 比较时，只需要比较同一标识块内的节点，从而提高了 diff 算法的效率。
5、其他
- API
- 请求
- 模版指令
- 路由
- 实例创建方式
