一、生命周期图示
以下是官方给出的Vue实例的生命周期图示,图中展示了11个生命周期钩子(函数)中的8个
二、生命周期函数
生命周期函数是指vue实例在某一个时间点会自动执行的函数
1.beforeCreate&created
在实例初始化时间以及生命周期后,依赖注入初始化之前会先调用beforeCreate
函数,在依赖注入初始化之后,即实例基本创建之后会调用created
函数
2.beforeMount&mounted
在实例与挂载点结合之前会调用beforeMount
函数,在结合之后会调用mounted
函数
3.beforeUpdate&updated
在实例数据发生变化进行渲染之前,会调用beforeUpdate
函数,渲染之后会调用updated
函数
4.beforeDestroy&destroyed
在实例摧毁之前会调用beforeDestroy
函数,摧毁之后会调用destroyed
函数
<!DOCTYPE html>
<html>
<head>
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">{{content}}</div>
<script>
var app = new Vue({
el: '#root',
data: {
content: 'hello world'
},
beforeCreate: function () {
console.log("beforeCreate");
},
created: function () {
console.log("created");
},
beforeMount: function () {
console.log(this.$el);
},
mounted: function () {
console.log(this.$el);
},
beforeUpdate: function () {
console.log("beforeUpdate");
},
updated: function () {
console.log("updated");
},
beforeDestroy: function () {
console.log("beforeDestroy");
},
destroyed: function () {
console.log("destroyed");
}
});
</script>
</body>
</html>
通过在控制台中输入app.$data.content = "..."
或者app.content = "…"
来改变数据可以调用beforeUpdate
和update
函数,输入app.$destroy()
摧毁实例可以调用beforeDestroy
和destroyed
函数
除了上述8个vue实例生命周期钩子外,还有activated
、deactivated
、errorCaptured
三个生命周期钩子,有兴趣的可以自行查看官方文档