组件的一生：创建 → 挂载 → 更新 → 销毁；又细分为前、后两个阶段
开发者根据组件的状态在特定阶段执行特定的操作
基本使用：引入对应的包 → 执行函数 → 传入回调
Lifetime
onBeforeMount()
注册一个钩子，在组件被挂载之前被调用
初始化；拉取/操作数据；但是 DOM还未就绪
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
console.log("onBeforeMount");
})
onMounted()
注册一个回调函数，在组件挂载完成后执行：DOM已就绪
多用于项目初始化
可以执行多个，但是仅仅执行1次
运维通过 追加 的方式，定义新的逻辑
import { onMounted } from 'vue'
onMounted(() => {
console.log("onMounted:Initialization before");
})
onMounted(() => {
console.log("onMounted:Initialization now");
})
onBeforeUpdate()
注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之前调用
onUpdated()
更新完毕
注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用
捕获响应式数据的更新；静态数据更新不会响应
onBeforeUnmount()
卸载之前
注册一个回调函数，在组件实例被卸载之前调用
是onBeforeUnmount，不是onBeforeUnmounted
onUnmounted()
注册一个回调函数，在组件实例被卸载之后调用
vue2中是destroy
onActivated()
适用于缓存组件
注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用
onDeactivated()
适用于缓存组件
注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用
<template>
<div class="about">
<div>about</div>
<div>{{ cd }}秒后返回/work</div>
</div>
</template>
<script setup>
import { onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
let cd = ref(5)
setInterval(() => {
cd.value--;
if (cd.value == -1) {
router.replace('/work')
}
}, 1000)
onMounted(() => {
console.log('onMounted');
})
onBeforeUpdate(() => {
console.log('onBeforeUpdate');
})
onUpdated(() => {
console.log('onUpdated');
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount');
})
onUnmounted(() => {
console.log('onUnmounted');
})
</script>
<style scoped></style>
已安装 Vs Code 扩展 Vue Vscode Snippets 的，请注意编辑过程中的代码片段提示，不要一个一个字母编辑
页面加载时，绑定事件处理器
页面卸载时，移除绑定的事件处理器
const handle = () => {
isHide.value = window.scrollY > 100 ? true : false
}
onMounted(() => {
window.addEventListener('scroll', handle)
})
onUnmounted(() => {
window.removeEventListener('scroll', handle)
})
页面跳转时，可能会保留之前的滚动位置
onMounted(() => {
window.scrollTo(0, 0)
// ...
})
多个页面需要控制时，可以使用 路由守卫 Guard
router.afterEach((to, from) => {
document.title = to.meta.title;
window.scrollTo(0, 0);
});
搜索组件参考设计如下
<script setup>
import { ref, onMounted } from 'vue';
let sql = ref(null)
onMounted(() => {
sql.value.focus()
})
</script>
<template>
<input type="text" ref="sql">
</template>
父组件设计如下
<script setup>
import { ref } from 'vue';
import Search from './components/Search.vue'
let isShow = ref(false)
const showBox = () => {
isShow.value = true
}
</script>
<template>
<button @click="showBox">click</button>
<Search v-if="isShow"></Search>
</template>