vue常用的生命周期函数
beforeCreate() {
console.log("1 beforeCreate在执行时,组件对象创建了,data选项没有初始化,渲染的虚拟DOM也没生成,数据也没有挂载")
console.log(this,this.$data,this.$el)
},
created() {
console.log("2 created在执行的时候,data已经注入实例,也就是data选项已经在组件对象初始化成功了,渲染的虚拟DOM也没生成,数据也没有挂载")
console.log(this,this.$data,this.$el)
},
beforeMount() {
console.log("3beforeMount在执行的时候,渲染的虚拟DOM已经生成,数据也没有挂载")
console.log(this,this.$data,this.$el)
},
mounted() {
console.log("4mounted在执行的时候,渲染的虚拟DOM被解析,数据已经挂载到容器了")
console.log(this,this.$data,this.$el)
},
beforeUpdate() {
console.log("5beforeUpdate数据再发生变化之前执行,在此处监听数据的变化")
},
updated() {
console.log("6updated数据再发生变化之后执行,在此处监听数据的变化")
},
beforeDestroy() {
console.log("7 组件销毁之前执行")
},
destroyed() {
console.log("8 组件销毁之后执行")
},
})
总结:1 beforeCreate: 可以发请求,但是不能赋值给data里面的数据
2 created 发请求 初始渲染的工作在此处执行
3 beforeMount 虚拟DOM生成 ,数据未挂载
4 mounted 虚拟DOM解析。数据已经挂载 进行获取DOM元素
5 beforeupdate 数据更新之前调用
6 updated 数据更新之后调用
7 beforedestroy 在销毁之前调用
8 destoryed 在销毁之后掉用 定时器清除,事件移除都可以在此处去写