<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
<script type="text/javascript" src="vue2.2.js"></script>
</head>
< body >
<!-- create is related to mounted:
beforecreated: el and data are not initialized
created: completed the initialization of data data, el did not
beforeMount: Completed el and data initialization
mounted : Finished mounting the dom element has been loaded into the HTML
destroy related: execute: app.$destroy()
After the destruction is complete, we change the value of message again, and vue no longer responds to this action.
However, the DOM element that was originally generated still exists. It can be understood that after the destroy operation is performed, it will no longer be controlled by Vue.
Lifecycle summary:
beforecreate : For example: you can add a loading event here
created : End the loading here, and do some initialization to realize the self-execution of the function
mounted : Initiate a backend request here, get back the data, and do something with the routing hook
beforeDestory: Are you sure to delete XX? destoryed : The current component has been deleted, clear the related content -->
< div id ="app" >
< input v-model ="message" />
< p > {{ message }} </ p >
</ div >
<script type="text/javascript">
var app = new Vue({
el: ' #app ' ,
data: {
message: " Lifecycle "
},
beforeCreate: function() {
console.group( ' beforeCreate state beforeCreate ===============" ' );
console.log("color:red", "el : " + this.$el); //undefined
console.log("color:red", "data : " + this.$data); //undefined
console.log("color:red", "message: " + this.message) //undefined
},
created: function() {
console.group( ' created state ===============" ' );
console.log("color:red", "el : " + this.$el); //undefined
console.log("color:red", "data : " + this.$data); //已被初始化
console.log("color:red", "message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('beforeMount 挂载前状态===============》');
console.log("color:red", "el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("color:red", "data : " + this.$data); //已被初始化
console.log("color:red", "message: " + this.message); //已被初始化
},
mounted: function() {
console.group('mounted 挂载结束状态===============》');
console.log("color:red", "el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("color:red", "data : " + this.$data); //已被初始化
console.log("color:red", "message: " + this.message); //已被初始化
},
beforeUpdate: function() {
console.group('beforeUpdate 更新前状态===============》');
console.log("color:red", "el : " + this.$el);
console.log(this.$el);
console.log("color:red", "data : " + this.$data);
console.log("color:red", "message: " + this.message);
},
updated: function() {
console.group('updated 更新完成状态===============》');
console.log("color:red", "el : " + this.$el);
console.log(this.$el);
console.log("color:red", "data : " + this.$data);
console.log("color:red", "message: " + this.message);
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
console.log("color:red", "el : " + this.$el);
console.log(this.$el);
console.log("color:red", "data : " + this.$data);
console.log("color:red", "message: " + this.message);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
console.log("color:red", "el : " + this.$el);
console.log(this.$el);
console.log("color:red", "data : " + this.$data);
console.log("color:red", "message: " + this.message)
}
})
</script>
</body>
</html>
初始化操作，异步请求的数据渲染适宜在 created() 钩子中
如果对数据更新做统一处理在 updated() 钩子中处理，区分不同数据更新的在 nextTick() 全局api处理；
watch:{} 对具体的某个数据可以做统一处理；简单的数据处理可以用 computed:{}, 复杂的watch处理；