版权声明:本文为博主原创文章,未经博主允许不得转载。 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>
源码下载: