Vue2.0生命周期八步曲
beforeCreate
:
beforeCreate执行时,data选项没有初始化;渲染的虚拟DOM树没有生成,且没有挂载到容器。
可以在这加个loading事件,在加载实例时触发
created
:
由于data选项已经存在,所以在此发起ajax请求最合理。(数据越早拿回来越好)这结束loading事件
created执行时,data选项已经被注入到实例,即data选项已经被初始化,可以使用;渲染的虚拟DOM树没有生成,且没有挂载到容器。
beforeMount
:
beforeMount执行时,渲染的虚拟DOM树已经生成,但未挂载到容器
mounted
:
mounted执行时,虚拟DOM树被解析,且挂载到容器
beforeUpdte
:
数据发生变化前执行,在此可以进行数据监视
updated
:
数据发生变化后执行,在此可以进行数据监视
beforeDestroy
:
组件销毁前执行
destroyed
:
组件销毁后执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>
<input type="text" v-model="msg">
</p>
</div>
<script src="vue.min.js"></script>
<script>
var app = new Vue({
// el: '#app',
data: {
msg: "hello"
},
beforeCreate() {
// 能不能在beforeCreate发起ajax请求?能发起请求,但无法绑定到data选项上。
console.log("1.beforeCreate执行时,data选项没有初始化;渲染的虚拟DOM树没有生成,且没有挂载到容器");
// console.log(this.msg);
// console.log(this.$data);
// console.log(this.$el);
},
created() {
// 由于data选项已经存在,所以在此处发起ajax请求最合理。数据越早拿回来越好。
// vue在created()钩子函数前都做了什么? (概率高)
console.log('2.created执行时,data选项已经被注入实例,即data选项已经被初始化,可以使用了;渲染的虚拟DOM树没有生成,且没有挂载到容器。')
// console.log(this.msg);
// console.log(this.$data);
// console.log(this.$el);
},
// 在执行了created钩子之后,vue判断一个组件有没有el选项,如果有el选项,再判断有没有tempate选项,如果有template选项,编译el选项对应的视图模板(渲染视图:生成一段html代码片段)
// 渲染的虚拟DOM树怎么生成的? vue调用渲染函数render()生成的。
beforeMount(){
console.log('3.beforeMount执行时,渲染的虚拟DOM树已经生成,但未挂载到容器。')
console.log(this.$el);
},
// mount鞍在马上,组件准备好了。
// mounted之前,vue做了什么?? 解析虚拟DOM树,挂载到容器。
mounted(){
console.log('4.mounted执行时,虚拟DOM树被解析,且挂载到容器。')
console.log(this.$el);
},
beforeUpdate(){
console.log("5.数据发生变化前执行,在此可以进行数据监视")
},
updated(){
console.log("6.数据发生变化后执行,在此可以进行数据监视")
},
beforeDestroy(){
console.log("7.组件销毁前执行")
},
destroyed(){
console.log("8.组件销毁后执行")
}
})
// 相当于el:'#app', 表示把vue实例和容器建立关联。
app.$mount('#app')
</script>
</body>
</html>