vue总共有8个生命周期3个阶段:
初始化阶段
- beforeCreate:组件实例化在创建之前,属性绑定之前,只是一个空壳,无法访问到数据和真实的dom和data。
- created:组件实例创建完成,属性绑定完成,但是dom未绑定。可以获取到初始数据,可以使用数据,也可以更改数据,但是不会触发updated函数。
- beforeMount:模块编译,事件挂载之前,变异模块将虚拟dom放在render函数中准备渲染,可以更改数据,但不会触发updated函数。
- mounted:模块开始编译,事件也挂载好了,组件,数据,真实的dom都渲染执行。
运行中阶段
- beforeUpdate:组件更新之前,vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。
- updated:组件更新后,数据已经更改完成,
dom也重新render完成*。
注销阶段
- beforeDestory:组件销毁之前,做一些善后工作,例如清除计时器、清除非指令绑定的事件等等。
- destoryed:组件销毁后,数据的绑定,事件监听等全部去除。
如下:
//1.一个组件或者实例的生命周期都是通过new开始的
//2.实例化之后,内部会做一些初始化事件与生命周期相关的配置
Vue.component("my-component",{
template:"#my-component",
data(){
return {
msg:1
}
},
//3.这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的
//同时页面中的真实dom节点也没有挂载出来,null
beforeCreate(){
console.log("beforeCreate....")
console.log(this.msg,document.getElementById("title"))
},
//4.created钩子函数内部的数据已经被挂载了,但是真实dom节点还是没有渲染出来
//在这个钩子函数里面,如果同步的去更改数据的话,运行中钩子函数是不会执行的。
//通常会在此钩子函数里面进入ajax的异步操作,另外还可以做一些初始化事件的绑定
created(){
// this.msg = 222222222222222
console.log("created...")
console.log(this.msg,document.getElementById("title"))
},
//5.接下来的过程,就是组件或者实例去查找各自的模板,让后将其编译成虚拟dom,即将放入render函数中做初始化渲染的操作。
//6.beforeMount代表dom马上就要被渲染出来了,但是还没有真正的在页面中渲染出来
//此钩子函数与created钩子函数基本一致,可以做ajax与初始化事件的绑定操作
beforeMount(){
console.log("beforeMount....")
console.log(this.msg,document.getElementById("title"))
},
//生成好了虚拟dom,然后在render函数里面替换对应的el,渲染成真实dom节点
//相当于在render函数里面做了一个初始化渲染的操作
// render(){ //相当于把组件内部的render函数覆盖了。自己的render是将虚拟dom渲染成真实dom的操作
// console.log("render.....")
// }
//7.mounted钩子函数是初始化阶段的最后一个钩子函数
//数据已经挂载完毕了,真实的dom也已经渲染出来了
//这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽
mounted(){
console.log("mounted.....")
console.log(this.msg,document.getElementById("title"))
},
//8.运行时钩子函数初始化阶段是不会主动执行的
//只有dom挂载完毕了,然后再去当数据发生变化的时候,beforeUpdate这个钩子函数才会执行
beforeUpdate(){
console.log("beforeUpdate....")
}
})
new Vue({}).$mount("#app");