Vue3 作为当前 Vue 的项目大势，开发当中需要注意区分 Vue2 与 Vue3 的区别以便切换新旧项目时可以流畅工作。记录一下 Vue2 与 Vue3 的区别总结笔记，温故知新。

v-model | v-if 与 v-for 的优先级 | v-on.native 修饰符

Vue3 可以没有根标签 | 组合式 API 和选项式 API | 生命周期变化

模板指令

一、v-model

prop：

value -> modelValue；

事件：

input -> update:modelValue

Vue3 新增：

可以在同一个组件上使用多个 v-model 绑定 可以自定义 v-model 修饰符

二、v-if 与 v-for 的优先级

Vue2

在一个元素上同时使用，v-for 会优先作用

Vue3

在一个元素上同时使用，v-if 会优先作用

由于语法上存在歧义，建议避免在同一元素上同时使用两者。

三、v-on.native 修饰符

Vue3 v-on 的 .native 修饰符已被移除。

组件

一、根节点不同

Vue2

必须有根标签。

Vue3

可以没有根标签，包裹在 fragement 虚拟标签中。

二、组合式 API 和选项式 API

Vue2 选项式 API

数据函数集中处理，逻辑复杂时不利于代码阅读

Vue3 组合式 API

同功能代码集中处理，利于书写维护

三、生命周期变化

1、 Vue2 到 Vue3 的改动

beforeDestroy —> onBforeUnmount

onBforeUnmount 在一个组件实例被卸载之前调用，当前，组件实例依然还保有全部的功能。

destroyed —> onUnmounted

onUnmounted 在一个组件实例被卸载之后调用。当前，其所有子组件都已经被卸载，所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

2、 Vue3 <KeepAlive>包裹的组件，多两个生命周期钩子

activated

当组件被插入到 DOM 中时调用

deactivated

当组件从 DOM 中被移除时调用

3、 Vue2 生命周期 (创建、挂载、更新、销毁)

初始化生命周期事件

beforeCreated

初始化：数据监测、数据代理

created

解析模板，生成虚拟 DOM。有 el 或者$mount 的时候继续往下执行

————–^创建

beforeMount

将虚拟 DOM 转为真实 DOM 插入页面

mounted

————–^挂载

beforeUpdated (数据是新的，页面是旧的)

生成新的虚拟 DOM 与旧的虚拟 DOM 比较，页面更新

updated (数据是新的，页面也是新的)

————–^更新

beforeDestory (data、methods、指令……都还可以用，)

(beforeDestory 可以做收尾操作，例如关闭定时器，取消订阅消息等) 销毁 VM，销毁实例，解绑指令和事件监听器

destoryed

————–^销毁

3、 Vue3 组合式 API：生命周期钩子

onBeforeMount()

注册一个钩子，在组件被挂载之前被调用。

onMounted()

注册一个回调函数，在组件挂载完成后执行。

onBeforeUpdate()

注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

onUpdated()

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

onBeforeUnmount()

注册一个钩子，在组件实例被卸载之前调用。

onUnmounted()

注册一个回调函数，在组件实例被卸载之后调用。

onErrorCaptured()

注册一个钩子，在捕获了后代组件传递的错误时调用。

onActivated()

注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

onDeactivated()

注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。