一、什么是生命周期
共有八个阶段 创建前后 挂载前后 更新前后 销毁前后
创建前/后:在创建之前,vue实例的el和data都为undefined,没有初始化。在创建阶段,data数据有了但是el还没有。
挂载前/后:在挂载前,vue实例的el和data都初始化了,但还是挂载前的虚拟dom节点,data.message还没替换。在挂载阶段,实例挂载完成,data.message成功渲染
更新前/后:当data发生变化时,会触发这两个方法
销毁/前后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在
二、
- beforeCreate 创建之前
实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate 钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的 dom,一般不做操作
2.created 创建之后
挂载数据,绑定事件等等,然后执行 created 函数 可以访问到数据,但访问不到DOM
3.beforeMount 挂载之前
dom 已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发 updated。可以访问数据和DOM
但此时的DOM还没有渲染
-
mounted 挂载之后
组件已经出现在页面中,数据、真实 dom 都已经处理好了,事件都已经挂载好了,可以在这里操作真实 dom 等事情。可以访问数据和DOM,DOM已经渲染 -
beforeUpdate 更新渲染之前
vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟dom 树利用 diff 算法进行对比之后重新渲染,一般不做什么事儿 可以访问数据和DOM,DOM已经渲染
6.updated 更新渲染完成
当更新完成后,执行updated,数据已经更改完成,dom 也重新 render 完成,可以操作更新后的虚拟 dom
7.beforeDestroy 销毁之前
一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等
8.destroyed 销毁之后
组件的数据绑定、监听…去掉后只剩下 dom 空壳
<div id="app" ref="app">
{{name}}
</div>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
name:"VUE开发"
},
//01 创建之前 数据还没有挂载呢,只是一个空壳,无法访问到"数据"和真实的"DOM"
/* beforeCreate(){
console.log("将要创建");
console.log(this.$data);
console.log(this.$el)
}, */
//02 创建完成 获取初始化数据,无法渲染DOM
/* created(){
console.log("创建完毕");
console.log(this.$data);
console.log(this.$el)
}, */
//03 即将挂载
/* beforeMount(){
console.log("即将挂载");
console.log(this.$data);
console.log(this.$el)
}, */
//04 挂载完毕
/* mounted(){ //有数据,有DOM 已渲染
console.log("即将挂载");
console.log(this.$data);
console.log(this.$el)
}, */
//05 更新渲染之前
/* beforeUpdate(){
//控制台输入 vm.$data.name="新值" 后触发函数 beforeUpdate()
console.log("即将更新渲染");
let name = this.$refs.app.innerHTML;
console.log("name:" + name)
}, */
//06 更新渲染之后
/* updated(){ //渲染完成,data中的数据已被更新后的值替换
console.log("更新渲染完成");
let name = this.$refs.app.innerHTML;
console.log("name:" + name)
}, */
// 07 销毁之前
//以下两个在控制台并不能打印出来,执行完vm.$destroy()即可打印
beforeDestroy(){
console.log("before destroy销毁之前");
console.log("data:" + this.$data);
console.log("dom:" + this.$el);
console.log("------------");
},
//08 销毁之后
destroyed(){
console.log("destroyed销毁完成");
console.log("data:" + this.$data);
console.log("dom:" + this.$el);
console.log("------------");·
}
})
console.log("vue实例外的打印输出"+vm.$data)
</script>