【Vue常见面试题】vue组件生命周期钩子函数

是壬不是任
141 阅读4分钟

“我正在参加「掘金·启航计划」”

1. vue组件生命周期钩子函数介绍

对于生命周期钩子函数的理解，vue作者本人是这样解释的

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

简单来说：vue生命周期钩子就是vue从创建到销毁过程中，会执行的一些回调函数

这也类似于人生老病死的过程

image.png

2. Vue官网生命周期示意图

lifecycle.png

3. 生命周期钩子详解

根据vue官网的说明 vue的生命周期钩子可以大致分为四大阶段,8个方法

  1. 初始化阶段
  2. 挂载阶段
  3. 更新阶段
  4. 销毁阶段

接下来详细介绍一下这四个阶段,观察一下它们分别做了哪些事

初始化阶段

  1. beforeCreate

    • 初始化vue实例，声明周期函数，事件(不是页面点击事件哈，就是vue本身自带的一些事件)
    • 此时创建了 vue 实例，但是还没有创建 el 和 data

  2. created

    • 这个钩子非常重要
    • 初始化data中数据，methods里面的方法
    • 此时创建了 data 实例，但是还没有创建 el
    • 经典应用 ： 页面一加载, ajax请求数据渲染页面。一般写在这个钩子里面
  // 初始化阶段
  //  1. beforeCreate: 创建vue实例,但是还没有创建el 和 date
  beforeCreate () {
    console.log('beforeCreate')
    console.log(this) // this指向vue实例
    console.log(this.name) // undefined
    console.log(this.$el) // undefined
  },
  // 2. created: 创建了 data 但是没有创建 el
  // 🎈使用频率极高 最早访问 data 中的数据, 一般在这个钩子中发送ajax请求
  created () {
    console.log('created')
    console.log(this) // this指向vue实例
    console.log(this.name) // 张三
    console.log(this.$el) //  undefined
  },

挂载阶段

  1. beforeMount

    • 这个钩子不常用
    • 此时创建了el, 但是还没有把data挂载到el
    • 完成el挂载点加载（生成虚拟DOM）

  2. mounted

    • 这个钩子很重要
    • 这是最早可以获取页面DOM元素的钩子
    • 虚拟DOM和渲染的数据一并挂到真实DOM上
  // 挂载
  // 3. beforeMount: 此时创建了el, 但是还没有把data挂载到el
  // 不常用: 编译器获取挂载点, 但是还没有挂载,页面看不到数据
  beforeMount () {
    console.log(3)
    console.log(this)
    console.log(this.name) // ikun
    console.log(this.$el) // template环境,此时看不到$el
    console.log(document.querySelector('p')) // null, 此时并没有渲染
  },
  // 4. mounted: 完成第一次渲染,把data中的数据渲染到$el上
  // 🎈常用钩子: 最早可以操作 DOM 的钩子  (页面一进入模拟点击第一个按钮)
  mounted () {
    console.log(4)
    console.log(this)
    console.log(this.name) // ikun
    console.log(this.$el) // div
  },

更新阶段

  1. beforeUpdate

    • 这个钩子不常用
    • 只要 data 中的数据变化 就会执行这个钩子
    • 可以获取到更新之后的data,但是还没有渲染到 DOM

  2. updated

    • 这个钩子不常用
    • 完成data渲染（将虚拟DOM渲染成真实DOM），把更新之后的 data 渲染到页面
  • 注意点：这两个钩子会执行多次，只要data中数据变化了，就会执行，执行频率较高，性能开销大，不建议使用
  // 更新阶段
  // 5. beforeUpdate: 检测到data数据发生变化,但是还没有更新el
  beforeUpdate () {
    console.log('beforeUpdate')
    console.log(this) // vue实例
  },

  // 6. updated: 更新之后的data,完成渲染
  updated () {
    console.log('updated')
    console.log(this) // vue实例
  },

销毁阶段

  1. before（vue准备销毁）

    • 这个钩子有些场景会用到，例如在这个钩子里面移除定时器 clearInterval( )
    • 这个钩子准备移除你的组件，移除数据监视器，侦听器等

  2. destroyed（已经销毁）

    • 解除el 和 data 之间的关联, 以后修改 data ,el 不会更新
  // 销毁
  // 7. beforeDestroy: vue 准备销毁
  beforeDestroy () {
    console.log(7)
  },

  // 8. destroyed: 已经销毁
  // 销毁: 解除el 和 data 之间的关联, 以后修改 data ,el 不会更新
  destroyed () {
    console.log(8)
  }

4. vue生命周期钩子注意点

每一个生命周期钩子中的this都是指向vue实例，所以，生命周期钩子不能是箭头函数

5. vue生命周期钩子经典面试题

  1. vue生命周期钩子简述:

    • vue从初始化到销毁的过程中会执行的函数

  1. vue生命周期钩子有哪些阶段?

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

  1. vue初始化渲染会执行哪些钩子?

    1. beforeCreated
    2. created
    3. beforeMount
    4. mounted

  1. vue生命周期钩子有哪些是常用的，具体是做什么的？

    1. created(): 一般用于发送ajax(页面一加载需要发送ajax在这个钩子)

    2. mounted(): 一般用于操作DOM(页面一加载需要操作DOM在这个钩子)

  2. 会执行多次的钩子是哪几个？

    • 只有更新阶段的两个钩子会执行多次,其他六个钩子都是执行一次
avatar
文章
阅读
粉丝