接上篇《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