Vue学习10----Vue中生命周期函数/生命周期钩子

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88971161

官方文档：
https://cn.vuejs.org/v2/guide/instance.html

生命周期函数/生命周期钩子：
组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数

mounted() 模板编译完成执行的函数，请求数据，操作dom , 放在这个里面
beforeDestroy() 页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数

下面程序测试一下生命周期：
项目结构：

App.vue

<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="home">
    <br>
    <v-life v-if="flag"></v-life>
    <br>
    <button @click="flag=!flag">挂载以及卸载life组件</button>
  </div>
</template>

<script>

  /*
  1、引入组件
  2、挂载组件
  3、在模板中使用

  生命周期函数/生命周期钩子：
  组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数
  */
  import Lify from './components/Lify.vue';

  export default {
    data () {
      return {
        msg:'你好vue',
        flag:true,
      }
    },
    components:{   /*前面的组件名称不能和html标签一样*/
      'v-life':Lify,
    },
  }
</script>


<style lang="scss">


</style>

Lify.vue

<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="life">
    生命周期函数的演示 ---{{msg}}
    <br>
    <button @click="setMsg()">执行方法改变msg</button>
  </div>

</template>


<script>

  /*

    生命周期函数/生命周期钩子：

      组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数
  */
  export default {

    data() {
      return {
        msg: 'msg'
      }
    },
    methods: {
      setMsg() {
        this.msg = "我是改变后的数据"
      }

    },

    beforeCreate() {
      console.log('实例刚刚被创建1----beforeCreate');
    },
    created() {
      console.log('实例已经创建完成2----created');
    },
    beforeMount() {
      console.log('模板编译之前3----beforeMount');
    },
    mounted() {     /*请求数据，操作dom , 放在这个里面  mounted*/
      console.log('模板编译完成4----mounted');
    },
    beforeUpdate() {
      console.log('数据更新之前----beforeUpdate');
    },
    updated() {
      console.log('数据更新完毕----updated');
    },
    beforeDestroy() {   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
      console.log('实例销毁之前----beforeDestroy');
    },
    destroyed() {
      console.log('实例销毁完成----destroyed');
    }
  }
</script>

源码下载：