VUE-生命周期函数

lify.vue:

<template>
  <div>
    <h3>声明周期函数的演示 -----{{msg}}</h3>
    <button @click="setMsg">执行方法改变msg</button>
  </div>
</template>

<script>
    export default {
      /*
      声明周期函数：
      组件挂在以及组件更新、组件销毁的时候触发的一系列方法
      这些方法就叫做声明周期函数或者生命周期钩子
       */
      data(){
        return {
          msg:"msg",
          changeFlag:false
        }
      },
      methods:{
        setMsg:function () {
          if(this.changeFlah===false) {
            this.changeFlah=true;
            this.msg = "我是改变后的数据";
          }else{
            this.changeFlah=false;
            this.msg = "msg";
          }
        }
      },
      beforeCreate(){
        console.log("实例创建之前");
      },
      created(){
        console.log("实例创建完成");
      },
      beforeMount(){
        console.log("模板编译之前");
      },
      mounted(){
        /*
        请求数据，操作dom，放在这个里面
         */
        console.log("模板编译完成");
      },
      beforeUpdate(){
        console.log("数据更新之前");
      },
      updated(){
        console.log("数据更新完毕");
      },
      beforeDestroy(){
        /*
        页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数
         */
        console.log("实例销毁之前");
      },
      destroyed(){
        console.log("实例销毁之后");
      }
    }
</script>

<style scoped>

</style>

挂载/卸载测试：

<v-life v-if="flag"></v-life>
      <button @click="flag=!flag">挂载以及卸载life组件</button>