前言

重点内容

  • 了解 vue 实例的生命周期

vue 实例的生命周期，是面试中常被问到的一个点。但是，现阶段只能做到了解的层次，随着学习的深入，再不断加深对生命周期的认识。（主要参考官方提供的「生命周期图例」）

  • 理解生命周期钩子（函数）的作用

生命周期钩子会在 vue 实例对应的生命周期被调用。

让我们有能力在 vue 实例生命周期的不同阶段，插入我们的代码，做一些事儿。

实例生命周期钩子

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

比如 created 钩子可以用来在一个实例被创建之后执行代码：

  1. new Vue({
  2.   data: {
  3.     a: 1
  4.   },
  5.   created: function () {
  6.     // `this` 指向 vm 实例
  7.     console.log('a is: ' + this.a)
  8.   }
  9. })
  10. // => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

Attention

不要在选项 property 或回调上使用箭头函数。

比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。

因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

生命周期图例

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

就如官方文档所说的，下边这张图，随着对 vue 理解的深入，对它的认知也会逐步加深。

image.png

示例

现阶段先掌握下面提到的这 6 个，知道它们在什么时候被调用即可。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>生命周期</title>
  7. </head>
  9. <body>
  10.   <div id="app">
  11.     <div>{{ msg }}</div>
  12.   </div>
  13.   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  14.   <script>
  15.     const vm = new Vue({
  16.       el: "#app",
  17.       data: {
  18.         msg: "hi vue",
  19.       },
  20.       beforeCreate() {
  21.         console.log('beforeCreate');
  22.       },
  23.       created() {
  24.         console.log('created');
  25.       },
  26.       beforeMount() {
  27.         console.log('beforeMount');
  28.       },
  29.       mounted() {
  30.         console.log('mounted');
  31.       },
  32.       beforeUpdate() {
  33.         console.log('beforeUpdate');
  34.       },
  35.       updated() {
  36.         console.log('updated');
  37.       },
  38.     });
  39.     setTimeout(() => {
  40.       vm.msg = "changed ......"
  41.     }, 3000);
  42.   </script>
  43. </body>
  45. </html>

image.png

image.png

beforeCreate

在实例化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用。

created

在实例创建完成之后立即调用。

在这一步，实例已经完成以下配置：

  • 数据观察（data observer）
  • 属性和方法的运算
  • watch/event 事件回调

然而，挂载阶段还没开始，$el属性目前不可见。

注意，这一步开始，才具备数据响应式，在此之前是不具备数据响应式的。

beforeMount

在 created 之后，挂载开始之前被调用，相关渲染函数（render）首次被调用。

该钩子在服务器端渲染期间不被调用。

mounted

el 被新创建的 vm.$el替换，挂载成功。在挂载成功时被调用。

该钩子在服务器端渲染期间不被调用。

beforeUpdate

数据更新时调用。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。

updated

组件 DOM 已经更新，组件更新完毕。在更新之后调用。

该钩子在服务器端渲染期间不被调用。