生命周期钩子
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
组件的生命周期钩子
组件挂载
<script setup>
import { onRenderTracked, onMounted } from "vue";
// 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。`开发模式`
onRenderTracked(() => {
// ...
});
// 挂载完成后
onMounted(() => {
// ...
});
</script>
组件更新
<script setup>
import { onRenderTriggered, onUpdated } from "vue";
// 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。`开发模式`
onRenderTriggered(() => {
// ...
});
// 更新后，父组件的更新钩子将在其子组件的更新钩子之后调用。
onUpdated(() => {
// ...
});
</script>
组件卸载
<script setup>
import { onUnmounted } from "vue";
// 卸载之后
onUnmounted(() => {
// ...
});
</script>
其他生命周期
<script setup>
import {
onErrorCaptured,
onActivated,
onDeactivated,
onServerPrefetch,
} from "vue";
// 捕获了后代组件传递的错误时
onErrorCaptured(() => {
console.log("onErrorCaptured");
});
// 缓存组件，插入到 DOM 中时
onActivated(() => {
console.log("onActivated");
});
// 缓存组件，被移除时
onDeactivated(() => {
console.log("onDeactivated");
});
// 注册一个异步函数，在组件实例在服务器上被渲染之前调用。
onServerPrefetch(() => {
console.log("onServerPrefetch");
});
</script>
Vue2 旧方式，组件的生命周期
组件挂载
<script>
export default {
data() {
// ...
},
// 在组件实例处理完所有与状态相关的选项后调用。
created(el, binding, vnode, prevVnode) {
// ...
},
// 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。`开发模式`
renderTracked(el, binding, vnode, prevVnode) {
// ...
},
// 挂载完成后
mounted(el, binding, vnode, prevVnode) {
// ...
},
};
</script>
组件更新
<script>
export default {
// 注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。`开发模式`
renderTriggered(el, binding, vnode, prevVnode) {
// ...
},
// 更新后，父组件的更新钩子将在其子组件的更新钩子之后调用。
updated(el, binding, vnode, prevVnode) {
// ...
},
};
</script>
组件卸载
<script>
export default {
// 卸载之后
unmounted(el, binding, vnode, prevVnode) {
// ...
},
};
</script>
其他生命周期
<script>
export default {
// 捕获了后代组件传递的错误时
errorCaptured(el, binding, vnode, prevVnode) {
// ...
},
// 缓存组件，插入到 DOM 中时
activated(el, binding, vnode, prevVnode) {
// ...
},
// 缓存组件，被移除时
deactivated(el, binding, vnode, prevVnode) {
// ...
},
// 注册一个异步函数，在组件实例在服务器上被渲染之前调用。
serverPrefetch(el, binding, vnode, prevVnode) {
// ...
},
};
</script>