Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染—更新—渲染、卸载等一系列过程。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。
同时在这个过程,也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
生命周期钩子的 this 指向调用它的 Vue 实例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue 生命周期与钩子函数</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: '123456'
},
beforeCreate: function() {
console.log("beforeCreate:");
console.log(this.$el);
console.log(this.$data);
console.log(this.number);
console.log("_________________");
},
created: function() {
console.log("created:");
console.log(this.$el);
console.log(this.$data);
console.log(this.number);
console.log("_________________");
},
beforeMount: function() {
console.log("beforeMount:");
console.log(this.$el);
console.log(this.$data);
console.log(this.number);
console.log("_________________");
},
mounted: function() {
console.log("mounted:");
console.log(this.$el);
console.log(this.$data);
console.log(this.number);
console.log("_________________");
},
beforeUpdate: function() {
console.log("beforeUpdate:");
console.log(this.$el);
console.log(this.$data);
console.log(this.number);
console.log("_________________");
},
updated: function() {
console.log("update:");
console.log(this.$el);
console.log(this.$data);
console.log(this.number);
console.log("_________________");
},
beforeDestroy: function() {
console.log("beforeDestroy:");
console.log(this.$el);
console.log(this.$data);
console.log(this.number);
console.log("_________________");
},
destroyed: function() {
console.log("destroyed:");
console.log(this.$el);
console.log(this.$data);
console.log(this.number);
console.log("_________________");
}
});
</script>
</body>
</html>
beforeCreate(实例创建前):
实例组件刚开始创建,el 和数据都还没有初始化。
created(实例创建后):
进行初始化事件,进行数据的观测,el 还是没有初始化。
beforeMount(元素挂载前):
dom 未完成挂载,数据初始化完成,但是数据的双向绑定还是 {{}},这是因为 Vue 采用了 virtual dom(虚拟 dom)技术。
mounted(元素挂载后):
完成挂载,将数据渲染进 dom。
beforeUpdate(实例更新前):
只要是页面数据改变了都会触发,数据更新之前,页面数据还是原来的数据。
updated(实例更新后):
只要是页面数据改变了都会触发,数据更新完毕,页面的数据是更新完成的。
beforeDestroy(实例销毁前):
实例销毁之前调用,在这一步,实例仍然完全可用。
destroyed(实例销毁后):
Vue 实例销毁后调用,调用后,Vue 实例指示的所有内容都会解除绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁。