【后端速成Vue】Vue 的生命周期

最新推荐文章于 2024-11-18 15:52:59 发布

原创最新推荐文章于 2024-11-18 15:52:59 发布 · 8.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

后端速成Vue 专栏收录该内容

8 篇文章

订阅专栏

前言：

本期将会介绍 Vue 的声明周期对应的钩子，以及理解什么时候该用什么钩子函数。

篮球哥找工作专属IT岗位内部推荐：

专属内推链接：内推通道

1、了解 Vue 的生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

创建阶段：创建响应式数据
挂载阶段：渲染模板
更新阶段：修改数据，更新视图
销毁阶段：销毁Vue实例

每个阶段，所对应了两个钩子，也就是两个函数，下面就让我们来认识什么是生命周期钩子。

2、Vue 生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

在这里插入图片描述

3、beforeCreate 和 created

beforeCreate:
在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

created:
在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

这里用一个小的例子来观察一下 beforeCreate 和 created 的执行时机。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      },
      // 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
通过上述的代码和控制台运行结果，可以直接发现，beforeCreate 钩子是在响应式数据还没准备好就触发了，而 created 钩子则是在响应式数据准备好后触发，那么通常就可以在 created 钩子中发送初始化渲染数据的请求了。

4、beforeMount 和 mounted

beforeMount：
在挂载开始之前被调用，也就是还没将 Vue 中的响应式数据挂在到 DOM 树之前就被调用。

mounted：
Vue 中的响应式数据被挂在完成后被调用，此时就可以操作最终被挂载数据的 DOM 了。
注意：mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

这里我们也通过代码来演示 beforeMount 和 mounted 的执行时机。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        title: '篮球哥'
      },
      // 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },
    })
  </script>
</body>
</html>

在这里插入图片描述
通过代码和控制台的打印不难看出，在 beforeMount 钩子中，Vue 的响应式数据并没有被挂在到 DOM 树中，而 mounted 钩子中去获取 h3 的 innerHTML 获取的值就是对应的 Vue 实例中的 title 响应式数据，所以由此可见，beforeMount 在挂载开始之前被调用，mount 则是在挂在完成后被调用。

5、beforeUpdate 和 updated

beforeUpdate：
在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

updated：
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    //  仅在整个视图都被重新渲染之后才会运行的代码     
  })
}

简单举例说明：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
这两个钩子很简单，数据的更新驱动视图更新，beforeUpdate 在视图更新前被调用，updated 在视图更新后被调用，这么简单理解够ok了！

6、beforeDestroy 和 destroyed

beforeDestroy：
实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
      <br>
      <button @click="fun()">销毁实例</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
      },
      destroyed () {
        console.log('destroyed, 卸载后')
      },
      methods: {
        fun() {
          this.$destroy()
        }
      }
    })
  </script>
</body>
</html>