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组件：

<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>