浅析Vue中的生命周期
浅析Vue中的生命周期
一、介绍
1. 什么是生命周期？
vue中的声明周期指的是 组件 从创建到销毁的一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能 ），我们给这些方法起了个名字叫做 “ 生命周期钩子函数/组件钩子 ”
2. 我们为什么要了解生命周期呢？
因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
3. 这个生命周期是谁的生命周期？
组件
二、项目中生命周期的书写（功能）
Vue的生命周期分为三个阶段，分别为：初始化，运行中，销毁，一共8个钩子函数
**注意：**生命周期钩子函数不允许写成箭头函数（因为箭头函数会使this指向丢失）
我们通过下面这个案例来看一下项目中是如何书写生命周期的：
<body>
<div id="app">
<Hello>Hello>
div>
<template id="hello">
<div>
<p> {{ msg }} p>
div>
template>
body>
<script>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello 相亲了'
}
},
// ----------------------- 初始化-----------------------
beforeCreate () { },
created () { },
beforeMount () { },
// beforeMount执行完后应该是执行render()，但由于是内部进行的，所以我们看不到
// render函数作用是将 jsx 转换成 vdom 对象模型
mounted () { },
// ----------------------- 运行中-----------------------
beforeUpdate () { },
updated () { }
})
new Vue({
el: '#app'
})
</script>
1.初始化：
（1）beforeCreate
beforeCreate () {
console.log('1-beforeCreate')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
运行结果：
- 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
- 数据没有获得，真实dom也没有渲染出来
- 可以进行数据请求，提供了一次数据修改的机会
- 执行一次
（2）created
created () {
console.log('2-created')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
运行结果：
- 组件创建结束
- 数据得到了，真实dom没有渲染出来
- 可以进行数据请求，提供了一次数据修改的机会
- 执行了一次
（3）beforeMount
beforeMount () {
console.log('3-beforeMount')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
运行结果：
- 组件挂载前
- 任务： 判断el ， 判断 template
- 如果el没有，那么我们需要手动挂载，如果有，那么判断template
- 如果template有，那么进行render函数
- 如果template没有，那么通过 outerHTML 手动书写模板
- 数据可以获得，但是真实dom还没有渲染
- 可以进行数据请求，也提供了一次数据修改的机会
- 执行一次
（4）mounted
mounted () {
console.log('4-mounted')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
运行结果：
- 组件挂载结束
- 数据获得了，真实dom也获得了
- 可以进行数据请求，也就可以修改数据
- 执行了一次
- 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）
综上总结：
- 数据请求一般写在created里面
- 第三方库实例化我们一般会往mounted中写
2.运行中：
运行中有触发条件：数据更新/数据发生改变
（1）beforeUpdate
beforeUpdate () {
console.log('beforeUpdate')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
},
数据不变时，函数不触发，当数据改变时，运行结果：
- 更新前
- 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
- 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
- 可以触发多次（只要数据变化，就触发）
（2）updated
updated () {
console.log('updated')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
}
数据不变时，函数不触发，当数据改变时，运行结果：
- 更新结束
- 真实dom得到了，数据也得到了（ 更新后的 ）
- 动态数据获取（ 第三方库实例化 ）
3.销毁：
（1）beforeDestroy
（2）destroyed
在这里我们将这个钩子放在一起解释，因为这两个钩子功能是一致的（这两个钩子没有太大的区别）
这两个钩子的作用：
用来做善后的，比如计时器的关闭、第三方实例的删除
触发条件：当组件销毁时
我们要知道，Vue的销毁有两种形式：
- 通过开关的形式 —— 外部销毁
- 通过调用 $destroy 方法 —— 内部销毁
对比： 内部销毁 vs 外部销毁
- 外部销毁不仅能销毁组件，也能销毁该组件的dom结构
- 内部销毁只能销毁组件，不能销毁组件的dom结构
下面我们分别来看下这两种销毁的方法：
（1）通过开关的形式 —— 外部销毁
<body>
<div id="app">
<script>
Vue.component('Hello',{
template: '#hello',
mounted () {
this.time = setInterval ( () => {
console.log( '1903' )
},1000)
},
beforeDestroy () {
console.log('beforeDestroy')
clearInterval( this.time )
},
destroyed () {
console.log('destroyed')
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
（2）通过调用 $destroy 方法 —— 内部销毁
<body>
<div id="app">
<Hello>Hello>
div>
<template id="hello">
<div class="hello-box">
<script>
Vue.component('Hello',{
template: '#hello',
methods: {
clear () {
this.$destroy()
}
},
mounted () {
this.time = setInterval ( () => {
console.log( '1903' )
},1000)
},
beforeDestroy () {
console.log('beforeDestroy')
clearInterval( this.time )
document.querySelector('.hello-box').remove()
},
destroyed () {
console.log('destroyed')
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>