vue 生命周期
- 实例、组件通过 new Vue() 创建出来后会初始化事件和生命周期,然后就会执行 beforeCreate 钩子函数,这个时候数据还没有挂载,无法访问到数据和真实 dom ,一般我们在这个钩子函数里不做任何操作
- 挂载数据、绑定事件等,然后执行 created 函数,这个时候已经可以访问到数据了,也可以更改数据,但获取不到真实 dom,在这里更改数据不会触发 updated 函数,一般这个钩子函数中我们可以做 ajax 异步请求,绑定初始化事件
- 接下来开始找实例或者组件对应的模板,编译模板为虚拟 dom 放入 render 函数中准备渲染,然后执行 beforeMount 钩子函数,在这个函数里面虚拟 dom 已经创建完成,马上就要渲染,这里可以更改数据,也不会触发 updated 函数,一般这里可以做初始化数据的获取
- 接下来就是开始 render,渲染出真实 dom ,然后执行 mounted 钩子函数,此时,组件已经出现在页面中了,数据、真实 dom 都已经处理好了,事件也挂载好了,这里可以操作真实 dom ,比如拖拽事件
- 当组件或实例的数据更改后,会立即执行 beforeUpdate,然后 vue 的虚拟 dom 机制会重新构建虚拟 dom 与原来的虚拟 dom 利用 diff 算法,对比出差异,重新渲染页面,这里一般什么也不做
- 当更新完成后,执行 updated,数据已经更新完成,dom 也重新 渲染完成,可以操作更新后的 dom
- 当经过某种途径调用 $destroy 方法后,立即执行 beforeDestroy,一般在这里做善后工作,例如清除定时器、清除非指令绑定的事件。
- 组件的数据绑定、监听等都移除掉,剩下 dom 空壳,这个时候执行 destroyed,销毁组件
<div id="app">
<my-component></my-component>
</div>
<!--定义组件的模板结构-->
<template id="my-component">
<div>
<h1 id="title">hello---------{{msg}}</h1>
<p><input type="text" v-model="msg"></p>
</div>
</template>
<script>
/*
组件从创建到销毁的一系列过程叫做组件的声明周期。
vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,
并且这些函数会在一些特定的场合下去执行。(在生命周期的某一个时刻进行触发)
组件的生命周期钩子函数大致可以分为三个阶段:初始化、运行中、销毁
初始化阶段: beforeCreate created beforeMount mounted
运行中阶段: beforeUpdate updated
销毁阶段: beforeDestroy destroyed
*/
//初始化阶段
//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函数里面做了一个初始化渲染的操作
//7.mounted钩子函数是初始化阶段的最后一个钩子函数
//数据已经挂载完毕了,真实的dom也已经渲染出来了
//这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽
mounted(){
console.log("mounted.....")
console.log(this.msg,document.getElementById("title"))
},
//8.运行时钩子函数初始化阶段是不会主动执行的
//只有dom挂载完毕了,然后再去当数据发生变化的时候,beforeUpdate这个钩子函数才会执行
beforeUpdate(){
console.log("beforeUpdate....")
},
//9.数据已经更新完成,可以获取更新后的真实 dom
updated(){
console.log("updated....")
},
//10.组件销毁之前,一般可以做:定时器的清除,事件解绑的操作
beforeDestroy(){
console.log("beforeDestory....")
}
// 11.组件销毁完成
destroyed(){
console.log("destroyed....")
}
})
new Vue({}).$mount("#app");
</script>