vue3-生命周期钩子函数-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3-生命周期钩子函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

声明周期函数onMounted ,onUnmounted,onUpdated

onMounted：页面渲染之前执行，执行完，页面就出来了

onUnmounted：组件注销之前执行，执行完组件就不在页面显示了。如果隐藏组件就行执行。

onUpdated：当组件内的内容发生变化时，就会执行这个更新钩子函数，比如删除数组中的某个元素。

PostList组件：

<script setup>
import { ref, reactive, computed,watch,watchEffect } from "vue";
import SinglePost from "./SinglePost.vue";
import {onMounted ,onUnmounted,onUpdated} from "vue";
defineProps({
    posts:Array,
})
onMounted(()=>{
   // alert("页面渲染之前执行，执行完，页面就出来了");
})
//页面执行之前既可以用onMounted也可以用watchEffect
//watchEffect();
onUnmounted(()=>{
    alert("组件注销之前执行，执行完组件就不在页面显示了");
})
onUpdated(()=>{
    alert("当组件内的内容发生变化时，就会执行这个更新钩子函数");
})
</script>

<template>
    <div class="post-list">
        <div v-for="post in posts" :key="post.id">
           
            <SinglePost :post1="post"/>
        </div>
    </div>
</template>

<style scoped>

</style>

Home组件：文章来源地址https://www.toymoban.com/news/detail-674611.html

<script setup>
import { ref, reactive, computed,watch,watchEffect } from "vue";
import PostList from "../components/PostList.vue";
const posts=ref([
    {title:"标题1",body:"vue1",id:1},
    {title:"标题2",body:"lore200ddddd22222222222333",id:2},
    {title:"标题3",body:"vue3",id:3},
    {title:"标题4",body:"vue4",id:4},
    ]);
    const showPost = ref(true);
</script>

<template>
    <div class="home">
      <PostList :posts="posts" v-if="showPost"/>
      <button @click="showPost=!showPost">显示或隐藏postList组件</button>
      <button @click="posts.pop()">删除一个博客信息</button>
    </div>
</template>

<style scoped>

</style>

到了这里，关于vue3-生命周期钩子函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！