生命周期介绍
简单说就是一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期
vue的生命周期图
beforeCreate（创建前）
beforeCreate（初始化页面前）
详情：实例初始化之后，组件被创建时，这时候 el，data，message 都是 underfined
场景：可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些
created（创建后）
created（初始化界面后）
详情：实例创建完成后，data、methods 被初始化
场景：结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时
beforeMount（载入前）
beforeMount（渲染dom前）
详情：完成el和data初始化，在挂载开始之前被调用
场景：可以发送数据请求
注意：在服务器端渲染期间不会被调用
mounted（载入后）
mounted（渲染dom后）
详情：vue实例已经挂载到页面中
场景：获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求
注意：在服务器端渲染期间不会被调用
beforeUpdate（更新前）
beforeUpadated（更新数据前）
详情：数据更新时调用
场景：挂载完成之前访问现有DOM，比如手动移除已添加的事件监听器；也可以进一步修改数据
注意：在服务器渲染期间不会被调用，只有初次渲染会在服务端调用
updated（更新后）
updated（更新数据后）
详情：由于数据更改，重新渲染时调用
场景：可执行依赖与DOM的操作
注意：服务器端渲染期间不会被调用
beforeDestory（销毁前）
beforeDestory（卸载组件前）
详情：实例销毁之前调用
场景：实例销毁之前，执行清理任务，比如：清除定时器等
注意：服务器端渲染期间不会被调用
destoryed（销毁后）
destroyed（卸载组件后）
详情：vue实例销毁后调用。调用后，Vue实例指示的所有东西都会被解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
场景：提示已删除
注意：服务器端渲染期间不会被调用
生命周期代码的执行效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="change()">change</button>
<button v-on:click="destroy()">destroy</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 18
},
beforeCreate: function () {
console.group('beforeCreate 创建前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
created: function () {
console.group('created 创建完毕');
console.log("el: " + this.$el);
console.log("data: " + this.$data + JSON.stringify(this.$data));
console.log("message: " + this.message)
},
beforeMount: function () {
console.group('beforeMount 挂载前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
mounted: function () {
console.group('mounted 挂载结束');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
updated: function () {
console.group('updated 更新完成');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
destroyed: function () {
console.group('destroyed 销毁完成');
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message)
},
methods: {
change() {
app.message++;
},
destroy() {
app.$destroy();
}
}
})
</script>
</body>
</html>
页面运行效果
点击change的效果
点击destroy的效果
最后
如果本文对你有帮助得话，给本文点个赞❤️❤️❤️
欢迎大家加入，一起学习前端，共同进步！
