什么是Vue生命周期

Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载、销毁等⼀系列过程。

钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。

Vue生命周期图解

下图是Vue官方的生命周期图：

Vue有8个生命周期钩子函数

由上图可见Vue有8个生命周期

1. beforeCreate( 创建前，一般不用管 )

在这个阶段会初始化一些东西，例如：初始化data中的数据、methods中的方法、计算属性computed，以及this的指向等。

它是在实例初始化之后，数据观测和事件配置之前被调用.

此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

在这个生命周期可以做什么？

1. 可以做页面拦截

当进一个路由的时候我们可以判断是否有权限进去，是否安全进去，携带参数是否完整，参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断，省掉了创建一个组建Vue实例。

2.可以做自定义重定向

当路由还没有进去时我们判断是否正确进去，若不正确进去可以重定向到指定的页面。

这些都可以在vue路由层进行拦截和重定向。

所以，这个生命周期基本不用管。

// 初始化之前
beforeCreate() {
   
    console.log(this.messasge, "初始化数据阶段");
},

2. created ( 创建后 ）

实例已经创建完成之后被调用。

在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化。你可以调用methods中的方法，改变data中的数据，获取computed中的计算属性等。通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求。

挂在阶段还没有开始, $el属性目前不可见，不可操作 DOM 节点。

// 初始化完毕
created() {
   
    console.log("初始化好了");
},

3. beforeMount ( 挂载前)

挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化。

注意：此时还没有挂载html到页面上，不可操作 DOM 节点。

// 挂载前,对数据的最后一次进行更改,编译完毕,马上将要挂载
beforeMount() {
   
    console.log("编译完毕,将要进行挂载");
    console.log("还没有进行挂载,获取不了");
}

4. mounted ( 挂载后，经常使用)

挂载完成，也就是模板中的HTML渲染到HTML页面中，mounted只会执行一次。

// 编译完毕,将要去实现挂载
mounted() {
   
    console.log("能够获取到真实的DOM");
}

在这个生命周期可以做什么？

此时一般可以做一些ajax操作，操作 DOM 节点等。

5. beforeUpdate（更新前）

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程。

beforeUpdate() {
   
    // 当data里面的数据发生更新的时候,产生一份虚拟节点他，通过diff算法完成最大化的渲染，
    console.log("通过diff算法比对准备更新,数据还是之前的");  
}

6. updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用。

updated() {
   
    //data里面的数据和页面中此时是最新的了。
    console.log("更新完的");
}

7. beforeDestrioy（销毁前，有清除需要时使用）

在实例销毁之前调用，实例仍然完全可用。

在这个生命周期，还可以用this来获取实例。

在这个生命周期可以做什么？

一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件等。

beforeDestroy () {
   
    //为组件的销毁前做一些准备
    console.log("销毁前最后的挣扎")
    // 清除定时器
    clearInterval(this.timer);
    this.timer = null;
    // 移除监听事件
    window.removeEventListener('scroll', this.handleScroll)
}

8. destroyed（销毁后，一般不用管）

在实例销毁之后调用，调用后，所有的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。

destroyed() {
   
    // 组件已经完全销毁
    console.log("组件得到销毁");
}

✍创作不易，求关注😄，点赞👍，收藏⭐️