vue3-生命周期钩子函数
vue中声明周期函数onMounted ,onUnmounted,onUpdated
·
声明周期函数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>
更多推荐
已为社区贡献1条内容
所有评论(0)