Vue3 与 Vue2 的区别
-
生命周期 对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式 API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项 API（Options API）中可以直接调用生命周期钩子。
-
多根节点 Vue2，在模板中如果使用多个根节点时会报错；Vue3 支持多个根节点，也就是 fragment。即以下多根节点的写法是被允许的
-
Composition API Vue2 是选项 API（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。 Vue3 组合式 API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。
-
异步组件（Suspense） Vue3 提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。
-
Teleport Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置。比如项目中常见的 Dialog 弹窗。
-
响应式原理 Vue2 响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy。
Object.defineProperty 基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。
Vue.js 的生命周期分为 8 个阶段
beforeCreate：在实例初始化之后、数据观测 (data observer) 和事件配置之前被调用。 created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，el 替换，并挂载到实例上去之后调用该钩子。组件已经可用，可以操作 DOM 了。在这个阶段，$el 和实例的 data、methods 等属性已经被初始化完成。 beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态，不会触发附加的重渲染过程。 updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。调用时，组件的 DOM 已经更新，所以需要注意避免在这个钩子函数中操作数据，因为这可能会导致无限循环的更新。 beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：实例销毁之后调用。这个时候，所有的事件监听器和子组件都已经被移除。
