前言
看本文可同时参考官方文档。点击跳转
什么是生命周期?
一个东西从出生到死亡
什么是钩子函数?
提前在对象内部预埋的函数,这些函数会在规定的情况下执行。
vue的生命周期
在vue不同的时期,会执行一些特定的函数
beforeCreate
创建前:数据和容器都没有加载
created
创建后:刚读取完数据,还没有找到容器
beforeMount
挂载前:读完完数据,并找到容器,但是容器里的数据还未替换
mounted
挂载后:读完完数据,并找到容器,容器里的数据已替换,所谓挂载就是m和v建立联系。
beforeUpdate
数据更新前:
updated
数据更新后:
两个都需要在数据更新时候才能触发,如v-model
beforeDestroy
销毁前:
destroyed
销毁后:
一般都是点击一个按钮触发一个函数销毁: this.$destroy();
销毁后,如vue的一些指令就无法体现出来了
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{time.y}}年{{time.M}}月{{time.d}}日 {{time.h}}:{{time.m}}:{{time.s | toDub2}} {{time.week | toCnWeek}}</p>
<input type="text" v-model="msg">
<span>{{msg}}</span>
<button @click="des">销毁vue</button>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.filter('toDub2',function(v){
//个位数补0
return v<10?'0'+v:''+v;
})
Vue.filter('toCnWeek',function(v){
//显示星期几
return '星期'+'日一二三四五六'[v]
})
new Vue({
el:'#app',
data:{
msg:'',
time:{
y:2022,
M:02,
d:17,
h:14,
m:08,
s:0,
week:'星期四'
}
},
methods:{
des:function(){
this.$destroy();
},
toDub:function(n){
return n<10?'0'+n:''+n
},
colck:function(){
let oDate=new Date();
this.time={
y:oDate.getFullYear(),
M:this.toDub(oDate.getMonth()+1),
d:oDate.getDate(),
h:oDate.getHours(),
m:oDate.getMinutes(),
s:oDate.getSeconds(),
week:oDate.getDay()
}
}
},
beforeCreate:function(){//数据和容器都没有加载
console.log('创建前',this.$data,this.$el)
},
created:function(){//刚读取完数据,还没有找到容器
console.log('创建后',this.$data,this.$el)
},
beforeMount:function(){//读取完数据,找到了容器,但是数据还没有替换
console.log('挂载前',this.$data,this.$el)
},
mounted:function(){//数据已经替换。 所谓的挂在就是让m和v建立联系
console.log('挂在后',this.$data,this.$el)
setInterval(this.colck,1000)//每隔一秒执行一次
this.colck()//一上来就执行一次
},
beforeUpdate:function(){
console.log('数据更新前')
},
updated:function(){
console.log('数据更新后')
},
beforeDestroy:function(){
console.log('销毁前')
},
destroyed:function(){
console.log('销毁后')
}
})
</script>