Vue2 生命周期
| 阶段 | 解释 |
|---|---|
| beforeCreate | |
| created | |
| beforeMount | |
| mounted | |
| boforeUpdate | |
| updated | |
| boforeDestory | |
| destoryed |
Vue3 生命周期
| 阶段 | 解读 |
|---|---|
| setup | 对应 vue2 的 beforeCreate 和 created，但是执行在他俩之前，所以 setup 无法使用 data 和 methods 中的数据和方法，即无法操作 this，如果你在 setup 中获取 this 会得到 undefined；setup 中的变量和方法最后都要 return 出去，所以setup 中的程序只能是同步的，除非 return 后面接受一个异步对象，对象返回 setup 内定义的变量和方法，然后父组件使用 suspense 标签包裹异步组件 |
| onBeforeMount | 组件挂载到节点之前执行（即将渲染 DOMjie’dian） |
| onMounted | 组件挂载完成后执行 |
| onBeforeUpdate | |
| onUpdated | |
| onBeforeUnmount | |
| onUnmounted |
注意：
如果你在 Vue3 中同时使用了 vue2 的写法，vue3 的写法会优先执行。
除了 setup 之外，其他的阶段都会执行在 vue2 相应阶段的前面。
另外两个常用的钩子函数：
| 阶段 | 解读 |
|---|---|
| onActivated | 如果组件是 |
| onDeactived | 当该组件失活时调用 |