Vue实例的生命周期图示详解
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。从vue实例的创建,运行,销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期。
Vue生命周期经历哪些阶段:
总体来说:初始化、运行中、销毁
详细来说:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程
以下是Vue生命周期函数图示:
可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作,钩子函数如下:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
详细情况如下:
- 实例通过new Vue() 创建出来之后会初始化Vue自身带的事件和生命周期,然后进入beforeCreate函数阶段,此时,数据data还没有挂载到vm对象,无法访问到数据data和真实的dom挂载元素el
- 只有在挂载数据data,绑定事件等之后,才会进入created函数阶段,此时可以使用数据data,也可更改数据data,但是在这里更改数据不会触发updated钩子函数。注:此时挂载元素el还不存在
- 判断对象是否有挂载元素el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上手动挂载,即调用vm.$mount(el)。
- 然后判断template参数选项,如果vue实例对象中有template参数选项,则将其作为模板template编译成虚拟dom放入到render函数中准备渲染。如果没有template选项,则将挂载元素el的外部HTML作为模板template编译。
- 模板编译之后进入beforeMount函数阶段,给Vue实例添加el成员,并替换掉挂载的DOM元素
- 进入mounted函数阶段,此时可以进行真实的DOM操作了
- 当data中的数据发生变化就会进入beforeUpdate函数阶段,会出发相对应的组件重新渲染,触发updated函数
- 当调用vm.$destroy()时,会进入beforedestroy函数阶段
- Vue实例指示的所有东西都会解绑,事件监听器被移除,子实例被销毁,进入destroy函数阶段,此时一个Vue实例的生命周期结束。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue实例生命周期函数</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
//生命周期函数就是Vue实例在某一个时间点会自动执行的函数
var vm=new Vue({
el:"#app",
template:"<div>{{test}}</div>",
data:{
test:"hello"
},
computed:{
},
beforeCreate:function(){
console.log("----beforeCreate---创建前状态---")
console.log(this.$el)
},
created:function(){
console.log("----created---创建完状态--")
console.log(this.$el)
},
beforeMount:function(){
console.log("----beforeMount---挂载前状态--")
console.log(this.$el)
},
mounted:function(){
console.log("---mounted---挂载完状态--")
console.log(this.$el)
},
beforeUpdate:function(){
console.log("----beforeUpdate---更新前状态--")
console.log(this.$el)
},
updated:function(){
console.log("---updated---更新完状态--")
console.log(this.$el)
},
beforeDestroy:function(){
console.log("---beforeDestroy---销毁前状态--")
console.log(this.$el)
},
destroyed:function(){
console.log("---destroyed---销毁完状态--")
console.log(this.$el)
},
})
</script>
</body>
</html>
代码显示:
页面显示的数据和挂载的数据一致:
修改数据之后:
数据更新之后页面显示和输入一致:
当经过某种途径调用$destroy方法后,在实例销毁之前 立即执行beforeDestroy,在实例销毁之前调用。在这一步,实例仍然完全可用。
以上是我对Vue生命周期的一点理解,欢迎大家指正修改!