您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

11生命周期函数完整(v-if,数据更新)

发布时间：2023-04-09 12:37:12编辑：雪饮阅读（）

其实这次主要是学习了组件中数据更新前后的生命周期以及组件销毁前后的生命周期。
beforeUpdate、updated、beforeDestroy、destroyed
对于组件销毁前后生命周期的触发，可以通过v-if来模拟实现是最简单的。
完整实例如
App.vue
<template>
  <div id="app">
    <h2>这是App组件</h2>
    <v-header v-if="flag"></v-header>
    <button @click="onOff()">开启/关闭header组件</button>
  </div>
</template>
 
<script>
  import header from './components/header.vue';
    export default {    
      data () {
        return {
          flag:true
        }
      },
      methods:{
        onOff(){
          this.flag=(this.flag ? false:true);
        }
      },
      components:{
        'v-header':header
      },
    }
</script>
 
header.vue
<template>
    <div>
        <h2>这里是header组件</h2>
        <p>当前毫秒数:{{msg}}</p>
        <button @click="changeMsg()">刷新当前毫秒数</button>
    </div>
</template>
<script>
import { onUpdated } from 'vue';
 
export default{
    data(){
        return {
            msg:new Date().getTime()
        }
    },
    methods:{
        changeMsg(){
            this.msg=new Date().getTime();
        }
    },
    beforeUpdate(){
        console.log("数据更新前");
    },
    updated(){
        console.log("数据更新完毕");
    },
    beforeDestroy(){
        console.log("当前组件销毁前");
    },
    destroyed(){
        console.log("当前组件销毁完成");
    }
}
</script>