Vue 生命周期

Vue生命周期

​ vue生命周期分为 初始化,运行中,销毁 一共8个钩子函数

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
初始化
beforeCreate
​ 解析:

​ 1.在组件创建前触发,目的是为了组件的生命周期 和 组件的事件做准备

​ 2.数据没有获取到，真实dom也没有渲染出来

​ 3.项目而言没有太大的用处，可以在这一步进行数据请求（可以修改数据） 4.执行一次

{{ msg }}

//beforeCreate()钩子函数 表示在组件创建之前触发（意思就是还没有这个组件，所以并不会获取到数据）

Vue.component(‘Hello’, {
template: ‘#hello’,
data() {
return {
msg: ‘hello 相亲了’
}
},
beforeCreate() {
console.log(‘1-beforeCreate’)
console.log(‘data’, this.msg) //并没有输出数据
console.log(‘真实dom’, document.querySelector(‘p’) //并没有输出真实的dom
},
created
​ 解析:

​ 1.组件创建结束

​ 2.数据得到了，真实dom没有渲染出来

​ 3.可以进行数据请求，提供一次数据修改的机会

​ 4.执行了一次

Vue.component(‘Hello’, {
template: ‘#hello’,
data() {
return {
msg: ‘hello 相亲了’
}
},
created() {
console.log(‘2-created’)
console.log(‘data’, this.msg) //data,hello 相亲了
console.log(‘真实dom’, document.querySelector(‘p’)) //无法获取
},
}
beforeMount
​ 解析：

​ 1.组件挂载前

​ 2.任务:判断el 判断template

​ 2.1如果没有el： 解析不往下执行，需要我们手动挂载

​ 2.2如果有el：那么会判断是否有template，有template，就会进行render函数

​ 2.3如果没有template：通过outerHTML 手动书写模板

​ 3.数据可以获取到，但是真实数据还没有渲染（因为beforeMount这一步 render函数还没有生效，也就是说，此时还是虚拟的dom ）

​ 4.可以进行数据请求，也可以数据修改

​ 5.执行一次

解析：outerHTML

注意：outHTML会干掉外部标签
beforeMount

beforeMount() {
console.log(‘3-beforeMount’)
console.log(‘data’, this.msg)
console.log(‘真实dom’, document.querySelector(‘p’))
},
//Vue内部render函数 用来解析jsx转换成虚拟dom对象模型

mounted
​ 1.组件 挂载结束

​ 2.数据获得了 ， 真实dom也获得了

​ 3.也可以进行数据请求，数据修改

​ 4.执行了一次

​ 5.可以进行真实dom的操作（可以进行第三方库的实例化）

mounted() {
console.log(‘4-mounted’)
console.log(‘data’, this.msg)
console.log(‘真实dom’, document.querySelector(‘p’))
}
综上总结：

​ 1.数据请求一般写在created里面

​ 2.第三方库实例化一般在mounted中写

运行中
触发条件: 数据更新(数据修改的时候才会触发)

beforeUpdate
​ 解析：

​ 1.更新前

​ 2.重新渲染vdom(虚拟dom)，然后通过diff算法比较两次vdom，生成patch 补丁对象

​ 3.这个钩子函数更多的是进行内部操作，一般我们不干预

​ 4.只要数据改变就会被触发（触发多次）

beforeUpdate () {
console.log(‘beforeUpdate’)
console.log(‘data’,this.msg)
console.log(‘真实dom’,document.querySelector(‘p’))
},
Update
​ 解析：

​ 1.更新结束

​ 2.真实dom得到了,数据也得到了（更新后的）

​ 3.动态数据获取（第三方库实例化）

updated () {
console.log(‘updated’)
console.log(‘data’,this.msg)
console.log(‘真实dom’,document.querySelector(‘p’))
}
beforedestroy
​ 解析：

​ 1.Vue的销毁有两种形式

​ 1.1通过开关的形式

​ 1.2通过调用$destroy 方法

​ 1.3两种方式的对比：

​ 外部销毁不仅能销毁组件,也能销毁该组件的dom结构

​ 内部销毁只能销毁组件,不能销毁组件的dom结构

​ 2.触发条件:当组件销毁时触发

​ 3.使用:用来善后，比如第三方实例的删除 ， 关闭计时器等

​

通过 开关的形式

beforeDestroy () {
console.log(‘beforeDestroy’) //组件被销毁时候才会触发
},
destroyed () {
console.log(‘destroyed’)
}
destroy
​ 1.解析: 和beforeDestroy的功能都是一样的没什么区别

​ （vue的生命周期是模仿react的 react已经将销毁的两个生命周期合并成一个）