【Vue学习总结】11.Vue中组件的生命周期函数

接上篇《10.vue组件的使用》

上一篇我们主要讲解了vue组件的使用。本篇我们来讲解vue的组件的生命周期函数。
本系列博文使用的Vue版本：2.6.11

一、什么是生命周期函数

在vue里，生命周期函数就是组件挂载、更新和销毁时触发的一系列的方法，因为是在组件的各个生命周期发生时调用的回调方法，所以生命周期函数又被称为“生命钩子函数”。

vue提供生命周期函数的目的，就是使开发人员可以在组件不同的阶段有添加代码的机会。

之前我们在前年的博文中使用过其中一个生命周期函数，名为"mounted"，该函数是将已经编译好的模板，挂载到页面指定的容器中显示时回调的函数。

vue提供了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed这些生命周期函数，具体的作用和区别见下表：

下面是各个生命周期在执行过程中的位置：

二、演示各个生命周期函数

我们在原来的工程上新建一个组件，名为“Life.vue”：

然后在原来的HelloWorld.vue中引入这个组件，并注册：

然后回到Life.vue中编写我们的业务逻辑：

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

<script>
/**生命周期函数：组件挂载以及组件更新、销毁的时候触发的一系列的方法 */
export default {
    data(){
        return {
            msg: '我是一个生命周期函数的组件'
        }
    },
    methods:{
        setMsg(){
            this.msg="我是改变后的数据"
        }
    }
}
</script>

这里的效果就是，在访问该页面的时候，在div区域显示的是原始msg的内容“我是一个生命周期函数的组件”，然后点击“执行方法改变msg”的按钮后，该区域的值变为“我是改变后的数据”：

我们就在该例子中，编写生命周期函数，来看看各个钩子函数的执行时机。我们将各个生命周期函数编写进去：

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

<script>
/**生命周期函数：组件挂载以及组件更新、销毁的时候触发的一系列的方法 */
export default {
    data(){
        return {
            msg: '我是一个生命周期函数的组件'
        }
    },
    methods:{
        setMsg(){
            this.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>

首先直接刷新页面，在浏览器控制台可以看到：

然后我们点击“执行方法改变msg”的按钮，可以看到触发了beforeUpdate和updated函数：

我们在HelloWorld.vue里引入了life.vue组件，我们在HelloWorld.vue里编写一个按钮，来挂载和卸载life.vue组件，以便演示组件销毁的效果：

<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div class="hello">
    <v-header></v-header>
    <h1>{{ msg }}</h1>
    <button @click="run()">执行run方法</button>
    <v-life v-if="flag"></v-life>
    <br/>
    <button @click="flag=!flag">挂载以及卸载life组件</button>
  </div>
</template>

<script>
import Header from './Header.vue';
import Life from './Life.vue';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      flag:true
    }
  },
  methods:{
    run(){
      alert(this.msg);
    }
  },
  components:{
    'v-header':Header,
    'v-life':Life
  }
}
</script>

<!-- 添加 "scoped" 属性来限制里面css样式只能被该组件引用 -->
<style scoped>
  h1{
    color:red;
  }
</style>

在上面的代码中，我们定义了一个布尔参数，默认为true。在life组件的标签<v-life>增加一个显示条件，当flag为true的时候加载该组件。下面添加一个button按钮，点击按钮来改变flag的值，进而控制<v-life>组件的加载。

下面我们分别点击两次“挂载以及卸载life组件”的按钮，可以看到生命周期函数打印的信息：

以上就是vue组件的声明周期函数，后面在学习其它知识的时候会经常用到，到时会更熟悉。
下一篇我们来学习使用vue-resource来请求数据。

参考：
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

转载请注明出处：https://blog.csdn.net/acmman/article/details/108696849