VNode 生命周期事件 非兼容
概述
在 Vue 2 中,我们可以通过事件来监听组件生命周期中的关键阶段。这些事件名都是以 hook:
前缀开头,并跟随相应的生命周期钩子的名字。
在 Vue 3 中,这个前缀已被更改为 vue:
。额外地,这些事件现在也可用于 HTML 元素,和在组件上的用法一样。
2.x 语法
在 Vue 2 中,这些事件名和相应的生命周期钩子一致,并带有 hook:
前缀:
html
<template>
<child-component @hook:updated="onUpdated">
</template>
3.x 语法
在 Vue 3 中,事件名附带的是 vue:
前缀:
html
<template>
<child-component @vue:updated="onUpdated">
</template>
迁移策略
绝大多数情况下只需要修改前缀。生命周期钩子 beforeDestroy
和 destroyed
已经分别被重命名为 beforeUnmount
和 unmounted
,所以相应的事件名也需要更新。