Vue3-知识结构-生命周期

Vue3知识结构之生命周期

---

---

一、选项式API生命周期及其钩子函数

11个(普通钩子)+2个(keep-alive 专用钩子)+1(ssr专用钩子)=13+1个

export default {
    name: 'WithData',
    components: { Myvue },
    data() {
        return {},
    methods: {},
    beforeCreate() {
    //创建之前 data、methods、以及视图页面都未被创建},
    created() {
        // 已创建 data、methods、可以被打印  页面无法访问 },
    beforeMount() {
        // 已创建 data methods 可以被打印  页面无法访问},
    mounted() {
        //已挂载 可以访问页面},
    beforeUpdate() {
        //内存中的数据被修改，但页面还未更新，还是访问的旧DOM},
    updated() {
        //访问的数据修改后的新Dom},
    // beforeUnmount() {
    // 组件 的卸载前调用},
    // unmounted() { }
}

一、组合式API生命周期及其钩子函数

9个(普通钩子)+2个(keep-alive 专用钩子)+1(ssr专用钩子)=11+1个

onBeforeMount(()=>{})//还无法访问DOM
onMounted(()=>{})//正常访问页面DOM
onBeforeUpdate(()=>{})//数据更新时调用。内存中的数据被修改，但页面还未更新，还是访问的旧DOM
onUpdated(()=>{})//更新数据后调用访问新DOM
onBeforeUnmount(()=>{}) //组件卸载前调用
onUnmounted(()=>{}) //卸载组件实例后调用

其它场景触发

onErrorCaptured :：事件处理程序或生命周期钩子抛出错误时调用
onRenderTracked： 状态跟踪 跟踪响应式变量和方法，一旦页面更新，就会跟踪他们并返回一个event对象
onRenderTriggered： 状态触发 开发模式下可用，不会跟踪所有响应式变量和方法，定点追踪发生改变的数据，返回一个event对象
onActivated ： 与keep-alive一起使用 ，当keep-alive包裹的组件激活时调用
onDeactivated ：与keep-alive一起使用 ，当keep-alive包裹的组件停用时调用
onServerPrefetch ： ssr专用

三、keep-alive

是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而倒是dom的重新渲染

 onActivated 和 onDeactived

<router-view v-slot="{Component}">
        <keep-alive>
            <component :is="Component"></component>
        </keep-alive>
</router-view> 

//嵌套路由组件    
import { onActivated, onDeactivated } from "vue";
onActivated(()=>{})
onDeactivated(()=>{})

include 包含缓存的组件
exclude 缓存除了此组件的其它组件

 <keep-alive include='xx'></keep-alive> //xx 的name属性