vue生命周期
- vue生命周期就是vue实例从创建到销毁一系列过程中
- 在这个过程中会执行的一些函数的自调用,这些函数又称为
钩子函数
。
下图是vue官方生命周期图示:
从图中可以看到
当vue实例创建时首先有一个初始化阶段
。
- 在初始化之后所调用函数
beforeCreate
,此时data
和methods
以及dom
结构都还没有初始化。 - 在实例创建完成后所调用函数
Created
,此时data
和methods
已经可以使用,完成初始化,不过页面dom还未渲染出来
接下来是dom挂载阶段
。
- dom挂载之前所调用函数
beforeMount
,此时页面还没有数据,只是一个模板页面 - dom挂载之后所调用函数
mounted
,此时vue实例中的el
被新创建的vm.$el
替换,并挂载到实例上去之后调用该函数。,此时数据已经渲染到页面模板中,完成dom挂载阶段
数据更新阶段
-
在数据更新时调用,发生在虚拟 DOM 打补丁之前所调用的函数
beforeUpdate
,此时页面数据还是之前的数据 -
在由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后所调用的函数
updated
,此时数据已经更新完成
最后是销毁阶段
(当调用vm.$destroy()
时会销毁vue实例)
- 在实例销毁前所调用的函数
beforeDestroy
,此时vue实例仍然完全可用 - 在实例销毁后所调用的函数
destroyed
,此时会解除绑定vue实例所有东西,所有事件监听器,子实例。
用代码演示vue中的生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{msg}}</span>
<button @click="handleUpdate">更新数据</button>
<button @click="handleDestroy">销毁</button>
</div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
//创建vue实例
var vm = new Vue({
el: '#app',
data: {
msg: 'vue中的数据'
},
methods: {
//更新数据
handleUpdate() {
this.msg = "更新后的数据"
},
//销毁实例
handleDestroy() {
vm.$destroy()
}
},
//在实例初始化之后所调用
beforeCreate() {
console.log('实例初始化之后执行的函数beforeCreate')
},
//在实例创建完成后所调用
created() {
console.log('实例创建完成后执行的函数created')
},
//在挂载开始之前被调用
beforeMount() {
console.log('在挂载开始之前执行的函数beforeMount')
},
//在挂载开始之后被调用
mounted() {
console.log('在挂载开始之后执行的函数mounted')
},
//在数据更新之前被调用
beforeUpdate() {
console.log('在数据更新前执行的函数beforeUpdate')
},
//数据更新之后被调用
updated() {
console.log('在数据更新后执行的函数updated')
},
//销毁实例之前被调用
beforeDestroy() {
console.log('销毁实例之前被调用beforeDestroy')
},
//销毁实例之前被调用
destroyed(){
console.log('销毁实例之前被调用destroyed')
},
})
</script>
</html>
页面显示结果如下:
可以看到beforeCreate
、created
、beforeMount
、mounted
被依次调用。
点击更新数据
页面显示结果如下:
点击销毁
页面显示结果如下:
尝试再次修改数据
因为vue实例已经销毁,所以页面数据并没有发生变化
常用的钩子函数如下
beforeCreate
:在实例初始化之后所调用created
:在实例创建完成后所调用beforeMount
:在挂载开始之前被调用mounted
:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子beforeUpdate
:数据更新时调用,发生在虚拟DOM打补丁之前updated
:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子beforeDestroy
:实例销毁之前调用destroyed
:实例销毁后调用