一、什么是生命周期
生命周期就是组件从创建到销毁的整个过程。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程。
生命周期图解
二、生命周期的作用是什么
Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
生命周期中有多个事件钩子，在控制整个vue实例的过程时更容易形成好的逻辑。
三、生命周期的三个阶段
Vue的生命周期分为三个阶段：初始化、运行中、销毁。一共有八个钩子函数
注意：生命周期钩子函数不允许写成箭头函数，因为这使用箭头函数就会改变this指向
1、初始化
beforeCreate
- 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
- 数据没有获得，真实dom也没有渲染出来
- 可以进行数据请求，提供了一次数据修改的机会
- 执行一次
//组件创建之前用来做拦截
beforeCreate() {
let token=localStorage.getItem('token')
//判断有没有token值
if(!token){
//没有就跳转至登录页
this.$router.push('/login')
}
},
created
- 组件创建结束，任务是数据注入和反应
- 数据得到了(如果修改了数据，这里得到的也是旧数据)，真实dom没有渲染出来
- 可以进行数据请求，提供了一次数据修改的机会
- 执行了一次
<script>
import { getindexData } from "../api/homeindex.js";
export default {
data() {
return {
indeData: [],
};
},
created() {
//进入页面之后进行数据请求
getindexData().then((res) => {
//并且给定义的变量
this.indeData = res.data;
});
},
};
</script>
beforeMount
- 组件挂载前
- 任务:判断el和template如果el没有,那么我们需要手动挂载
new Vue().$mount(’#app’),如果有,那么判断template如果template有,那么进行render函数,将template即jsx转成vdom如果template没有,那么通过outerHTML手动书写模板- 数据可以获得(旧数据)，但是真实dom还没有渲染
- 可以进行数据请求，也提供了一次数据修改的机会
- 执行一次
mounted
- 组件挂载结束，任务是将vdom渲染成真实dom，然后挂载到页面
- 数据获得了(旧数据)，真实dom也获得了
- 可以进行数据请求，也可以修改数据
- 执行了一次
- 可以进行真实dom的操作了（ 可以进行第三方库静态数据的实例化了 ）
总结：
1、数据请求般写在created里面（进入页面第一次请求得到数据）
2、第三方库实例化我们一般会往mouted中写（静态数据）
2、运行中
beforeUpdate
- 更新前
- 任务是重新渲染VDOM,然后通过diff算法比较两次vdom,生成patch 补丁对象
- 这个钩子函数更多的是内部进行一些操作，我们就不再多干预了
- 可以触发多次
update
- 更新结束，任务是将patch对象渲染成真实dom
- 真实dom得到了，数据也得到了（ 更新后的新数据）
- 动态数据获取（ 第三方库实例化 ）
3、销毁
Vue的销毁有两种形式
- 通过开关的形式
- 通过调用 $destroy 方法（这种还需要手动销毁dom外壳）
在销毁时会用到两个钩子：beforeDestroy ， destroyed 这两个钩子功能是一样的没有什么太大的区别*
区别： beforeDestroy生命周期函数表示即将销毁，此时仍然可以使用子组件的实例、methods、watch 到了destroyed生命周期函数，此时已经被销毁，无法再使用子组件的实例，methods、watch
