Vue生命周期钩子

Vue生命周期钩子

• 生命周期：vue从创建到销毁的过程

  • 销毁指的不是删除dom节点，而是指解除data与el的关系

• 钩子：一种回调函数

注意点

• 根据官网文档介绍 ： 每一个生命周期钩子中的this都是指向vue实例
• 所以，生命周期钩子不能是箭头函数

---

vue的生命周期钩子分为四大阶段,8个方法

• 初始化 beforeCreate created
• 挂载 beforeMount mounted
• 更新 beforeUpdate updated
• 销毁 beforeDestroy destroyed

---

测试数据：

<template>
    <div>
        <p ref="p">我的名字是{{ name }}</p>
        <button @click="doClick">点我改名字</button>
    </div>
</template>
<script>
export default {
data() {
        return {
            name: '张三',
        };
    },
    methods: {
        doClick() {
            this.name = '李四'
        }
    },
}

---

阶段一：初始化（beforeCreate created）

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

​ 没有. 调用$mount()方法

​ 有, 继续检查template选项

1. beforeCreate钩子 :vue实例创建了，但是el和data还没有创建（准备创建data）
   • 初始化vue实例
   • 初始化事件(不是页面点击事件哈，就是vue本身自带的一些事件)
   • 初始化声明周期函数

beforeCreate() {
        console.log(1);
         console.log(this); //vue实例
         console.log(this.name);//undefined
    },

官网：在组件实例初始化完成之后立即调用。

会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用

2. created 钩子 :data数据创建了，但是el挂载点还没有创建（准备创建el）
   • 这个钩子非常重要
     • 经典应用 ： 页面一加载, ajax请求数据渲染页面。一般写在这个钩子里面
   • 初始化data中数据
   • 初始化methods里面的方法

 created() { 
        console.log(2); 
        console.log(this); //vue实例
        console.log(this.name);//张三
        console.log(this.$el);//undefined
    },

在组件实例处理完所有与状态相关的选项后调用

当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

阶段二：挂载阶段（beforeMount mounted）

1.template选项检查

​ 有 - 当前vue环境是脚手架， webpack就会编译.vue文件

​ 没有- 当前vue环境是html环境

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

• 3.beforeMount :el挂载点创建了，但是data数据还没有渲染（准备渲染中）
  • 根据你的vue代码环境(html环境与脚手架环境),来编译模板html结构
  • 完成el挂载点加载（生成虚拟DOM）

beforeMount() { 
        console.log(3); 
        console.log(this); 
        console.log(this.el);//html中有el ,脚手架环境中没有el是undefined 
        console.log(this.$refs.p);//undefined
    },

官方：当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

这个钩子在服务端渲染时不会被调用。

• 4.mounted ：data数据第一次渲染完毕（完成初始渲染）
  • 这个钩子很重要
    • 这个钩子是最早可以获取页面DOM元素的钩子
  • 虚拟DOM和渲染的数据一并挂到真实DOM上

mounted() { 
        console.log(4); 
        console.log(this); 
        console.log(this.el);//html中有el ,脚手架环境中没有el是undefined 
        console.log(this.$refs.p);//<p>我的名字是{{ name }}</p>
    },

官方：组件在以下情况下被视为已挂载：

• 所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)
• 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。

这个钩子在服务端渲染时不会被调用。

阶段三：更新阶段（beforeUpdate updated）

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

这两个钩子会执行多次，只要data中数据变化了，就会执行

• 5.beforeUpdate :检测到data数据变化，但是还没有开始重新渲染（data变了，准备重新渲染中）
  • 检测data数据变化， 修改虚拟DOM ，判断key是否相同，相同考虑复用，不同直接更新元素

官方：这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

这个钩子在服务端渲染时不会被调用。

• 6.updated ：变化后的data数据，完成渲染到页面（完成重新渲染）
  • 完成data渲染（将虚拟DOM渲染成真实DOM）

点击button就会触发更新的钩子

官方：父组件的更新钩子将在其子组件的更新钩子之后调用。

这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

这个钩子在服务端渲染时不会被调用。

=注意= ：不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！

阶段四：销毁阶段（beforeDestroy destroyed）

1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例断开关联后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行

• 7.beforeDestroy
  • 这个钩子有一些场景会用到
    • 例如在这个钩子里面移除定时器clearInterval()
  • 这个钩子准备移除你的组件，移除事件绑定、侦听器等

官方：当这个钩子被调用时，组件实例依然还保有全部的功能。

这个钩子在服务端渲染时不会被调用。

• 8.destroyed
  • 解除了data与el的关联了

官方：一个组件在以下情况下被视为已卸载：

• 其所有子组件都已经被卸载。
• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

这个钩子在服务端渲染时不会被调用。

---

总流程图：