Vue生命周期详解与面试点

要吃哨子吗
87 阅读4分钟

1-Vue生命周期钩子介绍

生命周期

一个组件从 创建 到 销毁 的整个过程就是生命周期 (可以直接看总结 在最后面)

image.png

  • vue生命周期钩子官方文档：

  • ==vue生命周期钩子介绍 ： vue从创建到销毁过程中，会执行的一些回调函数==

    • 钩子 ： 一种回调函数

      • 例如

        • window.onload = function(){ dom加载完毕，外部资源加载完毕就执行 }

    • 生命周期 ： vue实例从出生到销毁的过程

      • 出生：

        • 创建vue实例
        • 创建data数据
        • 创建el挂载点
        • 将data数据渲染到el挂载点

      • 销毁

        • vue实例被销毁

          • 这里销毁不是指vue实例变成了null，而是指解除data与el的关联

            • 说人话：修改了data，页面不会被渲染

  • ==注意点==

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

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

  • 初始化
  • 挂载
  • 更新
  • 销毁
执行顺序钩子函数执行时机
1beforeCreate(){}vue实例创建了，但是el和data还没有创建 （准备创建data） 底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）
2created() {}data数据创建了，但是el挂载点还没有创建 (准备创建el) 底层：初始化data中的数据和methods中的方法
3beforeMount() {}el挂载点创建了，但是data数据还没有渲染（准备渲染中） 底层：创建el挂载点，并且生成虚拟DOM
4mounted() {}data数据 第一次 渲染完毕 (完成初始渲染) 底层：将虚拟dom渲染成真实DOM
5beforeUpdate() {}检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) 会执行多次
6updated() {}变化后的data数据 ，完成渲染到页面 （完成重新渲染）会执行多次
7beforeDestroy() {}vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染 底层 ： 解除 事件绑定、侦听器、组件
8destroyed() {}vue实例已经销毁

image.png

lifecycle-1655115430452.png

<template>
  <div>
    <button @click=" name='李四' ">点我改名字</button>
    <button @click="$destroy()">点我销毁</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>
​
<script>
/* 
​
1. vue生命周期钩子 : vue从初始化到销毁的过程中会执行的函数
​
2. 四个阶段8个钩子 : 8个 
  (1)初始化阶段:  beforeCreate、 created
  (2)挂载阶段 : beforeMount、mounted
  (3)更新阶段 : beforeUpdate、updated
  (4)销毁阶段:  beforeDestroy、destroyed
​
3. vue初始渲染会执行哪些钩子 : 4个
  beforeCreate`    
  created
  beforeMount
  mounted
​
4. 两个常用
    created() :  一般用于发送ajax（页面一加载需要发送ajax在这个勾子）
    mounted() :  一般用于操作DOM（页面一加载需要操作DOM在这个勾子）
​
5. 有两个钩子会执行多次，其他钩子都是执行一次
    beforeUpdate、
    updated
*/
export default {
  data() {
    return {
      name: "张三",
      age: 20
    };
  },
  methods: {
    doClick() {
      console.log(1111);
    }
  },
  /* 生命周期钩子 */
  // 1. beforeCreate() :  创建了vue实例，但是还没有创建data
  beforeCreate() {
    console.log(1);
    console.log(this);
    console.log(this.name);
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子， 一般在这个钩子发送ajax */
  created() {
    console.log(2);
    console.log(this);
    console.log(this.$el);
    console.log(this.name);
  },
  // 3.beforeMount() : 创建挂载点，但是还没有把data挂载到el
  beforeMount() {
    console.log(3);
    console.log(this);
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); //null 没有渲染,所以无法获取dom
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log(4);
    console.log(this);
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); // p标签 完成渲染
  },
  // 5.beforeUpdate() : 检测到data数据发生变化,但是还没有更新el
  beforeUpdate() {
    console.log(5);
    console.log(this);// 获取的是变化后的数据, 但是页面还是显示之前的数据
  },
  // 6.updated(): 更新之后的data,完成渲染
  updated() {
    console.log(6);
    console.log(this);
  },
  // 7.beforeDestroy(): 正在销毁(接触data与el绑定、移除事件监听、移除侦听器)
  /*触发销毁钩子的两个条件 
  (1)对组件使用v-if
  (2)调用组件的 this.$destroy() 
  */
  beforeDestroy() {
    console.log(7);
    console.log(this);
  },
  //8.destroyed(): 完成销毁
  destroyed() {
    console.log(8);
    console.log(this);
  }
};
</script>
​
<style>
</style>

2-生命周期(初始化阶段)

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选项

image.png

  • 1.beforeCreate钩子

    • 这个钩子几乎不怎么用
    • 初始化vue实例
    • 初始化事件(不是页面点击事件哈，就是vue本身自带的一些事件)
    • 初始化声明周期函数

  • 2.created

    • 这个钩子非常重要

      • 经典应用 ： 页面一加载, ajax请求数据渲染页面。一般写在这个钩子里面

    • 初始化data中数据

    • 初始化methods里面的方法

image.png

3-生命周期(挂载阶段)

1.template选项检查

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

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

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

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

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

5.真实DOM挂载完毕

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

image.png

  • 3.beforeMount

    • 这个钩子不常用
    • 根据你的vue代码环境(html环境与脚手架环境),来编译模板html结构
    • 完成el挂载点加载（生成虚拟DOM）

  • 4.mounted

    • 这个钩子很重要

      • 这个钩子是最早可以获取页面DOM元素的钩子

    • 虚拟DOM和渲染的数据一并挂到真实DOM上

image.png

4-生命周期(更新阶段)

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

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

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

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

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

image.png

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

  • 5.beforeUpdate

    • 这个钩子用的不是较多
    • 检测data数据变化， 修改虚拟DOM

  • 6.updated

    • 这个钩子用的不是较多
    • 完成data渲染（将虚拟DOM渲染成真实DOM）

image.png

5-生命周期(销毁阶段)

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

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

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

4.实例销毁后, 最后触发一个钩子函数

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

  • 7.beforeDestroy

    • 这个钩子有些场景会用到

      • 例如在这个钩子里面移除定时器clearInterval()

    • 这个钩子准备移除你的组件

    • 移除数据监视器，侦听器等

  • 8.destroyed

    • 这个钩子几乎不怎么用，因为已经GG了，一切都晚了

image.png

总结: vue生命周期钩子面试点

  • 1.vue生命周期8个钩子, 4个阶段

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

  • 2.vue初始渲染走4个钩子

    • 初始化阶段:beforeCreate、created
    • 挂载阶段:beforeMount、mounted

  • 3.vue钩子那些用的比较多

    • created : 用于发送ajax请求
    • mounted : 用于操作dom

  • 4.vue钩子那些会反复执行

    • beforeUpdate、 updated
avatar
文章
阅读
粉丝