Vue3生命周期钩子函数使用示例，setup语法糖模式

Love The Way You Lie 2023-10-10 17:49 36阅读 0赞

![5d24ed920f5c48a2b97922546ba62529.png][]Vue3的生命周期钩子函数，有能力的可以看官方示例：[组合式 API：生命周期钩子 | Vue.js][API_ _ Vue.js]

在setup语法糖模式下，会少两个钩子函数：boforeCreated和created，这两个函数现在相当于用setup代替了，直接在setup里面写逻辑就可以了。

这里主要讲常用的6个钩子函数：onBeforeMount, onMounted, onBeforeUpdate, onUpdated，onBeforeUnmount, onUnmounted

其中onBeforeUnmount, onUnmounted需要引用组件来实现调用，在子组件里面添加，在父组件中使用v-if控制这个子组件的显示和消失，就可以了。

子组件代码：

<template>
    <div>
    这是关于页面的内容
    </div>
    </template>
    
    <script setup lang='ts'>
    import {onBeforeUnmount, onUnmounted } from 'vue'
    // 组件销毁之前
    onBeforeUnmount(() => {
      console.log("组件销毁之前");
    })
    
    // 组件销毁之后
    onUnmounted(() => {
      console.log("组件销毁之后");
    })
    </script>
    
    <style scoped>
    
    </style>

父组件代码：

<template>
    <div>
      <h2>Vue3的生命周期</h2>
      <div>
        <button @click="updateContent">点击更改组件内容</button>
        <button @click="show">创建和销毁组件</button>
        <div ref="demo">{
       { content }}</div>
        <AboutMe v-if="display" ></AboutMe>
      </div>
    </div>
    </template>
    
    <script setup lang='ts'>
    import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'
    // import AboutMe from './views/AboutMe.vue'
    import AboutMe from './views/AboutMe.vue'
    
    console.log("setup语法糖模式中，可以直接在这里当做created函数使用");
    
    const demo = ref<HTMLDivElement>()
    
    const content = ref<string>("这是内容：div内容")
    
    const display = ref<boolean>(true)
    
    const updateContent = ()=>{
      content.value = "div组价内容更新"
    }
    
    const show = ()=>{
      display.value = !display.value
    }
    
    // 页面渲染之前
    onBeforeMount(() => {
      console.log("渲染之前", demo);
    })
    
    // 页面渲染之后
    onMounted(() => {
      console.log("渲染之后", demo);
    })
    
    // 组件更新之前
    onBeforeUpdate(() => {
      console.log("组件更新之前", demo);
    })
    
    // 组件更新之后
    onUpdated(() => {
      console.log("组件更新之后", demo);
    })
    
    </script>
    
    <style scoped>
    
    </style>

[5d24ed920f5c48a2b97922546ba62529.png]: https://img-blog.csdnimg.cn/5d24ed920f5c48a2b97922546ba62529.png
[API_ _ Vue.js]: https://cn.vuejs.org/api/composition-api-lifecycle.html