vue生命周期
生命周期:
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期。
生命周期函数=生命周期事件=生命周期钩子
vue生命周期:
1、beforeCreate()
初始化了一个空的Vue实例对象,data和methods中的数据还没有初始化。
一般用于页面重定向
2、created()
data和methods中的数据初始化好了,最早可以在此周期内调用methods中的方法或data中的数据。
一般用于接口请求和数据初始化
3、beforeMount()
内存中的虚拟DOM已经形成,但是好没有挂载到页面中。
4、mounted()
已经将DOM元素挂载到页面中,最早可以在此周期内操作DOM元素。
5、beforeUpdate()
元素更新之前,此时页面中的数据还是旧的,而data的数据是新的,尚未同步。
6、updated()
元素更新之后,此时页面和data中的数据都是新的。
7、beforeDestroyed()
销毁之前,实例中的数据还处于可用状态。
一般用于清除定时器和监听等
8、destroyed()
销毁之后,实例中的所有数据都不可以用
beforeUpdate()和updated()可以执行0-多次,其余生命周期函数只可以执行一次。
<div id='app'>
<div>{{msg}}</div>
<input type="text" v-model="msg">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg:'hello world!'
},
methods: {
},
// 生命周期
// 创建之前,初始化尚未完成
beforeCreate(){
console.log('beforeCreate');
console.log('msg:'+this.msg);
},
// 创建之后,第一个可以操作data数据的生命周期
created(){
console.log('created');
console.log('msg::'+this.msg);
},
// 挂载之前,页面元素尚未更新
beforeMount(){
console.log('beforeMount');
},
// 挂载之后,可以操作dom元素
mounted(){
console.log('mounted');
},
// 元素更新之前 可执行0-多次
beforeUpdate(){
console.log('beforeUpdate');
},
// 元素更新之后
updated(){
console.log('updated');
},
beforeDestroy(){
console.log(beforeDestroy);
},
destroyed(){
console.log(destroyed);
}
})
</script>