Vue生命周期
参考:
vue实例的生命周期
推荐一篇干货博客
一定要看看这篇博客的评论
什么是生命周期:
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
- 生命周期钩子:就是生命周期事件的别名而已;
- 生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类:
1,创建期间的生命周期函数:
- beforeCreate:实例刚在内存中被创建出来,整个页面被创建之前。
此时,data 和 methods 还不可用,el不可用。 - created:实例已经在内存中创建完毕,模板编译前。
此时, data 和 methods可用,el , property 目前尚不可用。
在这里更改数据不会触发updated钩子函数。
一般可以在这里做初始数据的获取。 - beforeMount:模板编译完成,挂载前。el不可用。
在这里更改数据,不会触发updated
。 - mounted:挂载完成。组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了。
此时,挂载元素el可用。如果要通过某些插件操作页面上的DOM,最早应该在mounted中操作。
注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick
:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the entire view has been rendered
})
}
2,运行期间的生命周期函数:
只有当数据data发生改变后,才会触发这两个函数。
- beforeUpdate:在重新渲染之前触发。 此时 data 中的状态值是最新的,但此时还没有开始重新渲染DOM节点,所以页面上还没有更新。
这里不能更改数据,否则会陷入死循环
- updated:DOM渲染之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
这里不能更改数据,否则会陷入死循环
。
注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 updated 里使用vm.$nextTick:
当updated钩子被调用时,组件 DOM 已经更新,现在可以执行依赖于 DOM 的操作。然而在大多数情况下,应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 。
updated: function () {
this.$nextTick(function () {
// Code that will run only after the entire view has been re-rendered
})
}
以下两个函数只有当组件被keep-alive包裹时调用才有效
-
activated:被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
-
deactivated:被 keep-alive 缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。
3,销毁期间的生命周期函数:
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。常用来销毁一些监听事件和定时器。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
- errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
来看个demo:
<!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="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{
{
message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " &