Vue 生命周期钩子

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

Vue 生命周期

以下注释为个人拙见，会不断完善。下图也会不定期更新。

vue-lifecycle-comment.png

注意事项

  • mounted 只保证当前组件挂载完毕，但是并不会保证该组件下的所有子组件也都一起挂载完毕。如果你希望等到整个视图都渲染完毕（改组件及其所有子组件都挂载完毕），可以用 this.$nextTick 替换掉 mounted
new Vue({
  el: "#app",
  components: {
    msg
  },
  mounted() {
    this.$nextTick(() => {
      // 需要等到所有子组件被挂载完成后再执行的逻辑写这里
    });

    // 当前组件挂载完成
  }
});
  • updated 只保证当前组件重绘完毕，但是并不会保证该组件下的所有子组件也都一起重绘完毕。如果你希望等到整个视图都重绘完毕（改组件及其所有子组件都重绘完毕），可以用 this.$nextTick 替换掉 updated
new Vue({
  el: "#app",
  components: {
    msg
  },
  updated() {
    this.$nextTick(() => {
      // 需要等到所有子组件被重绘完成后再执行的逻辑写这里
    });

    // 当前组件重绘完成
  }
});

Vue.nextTick(callback)

在修改数据之后，如果需要对修改后的 DOM 进行操作，请在修改数据后立即使用 nextTick 函数，因为该函数的回掉函数会在 DOM 更新完成后自动被调用。

测试

执行下面的代码！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 生命周期测试</title>

    <style>
      button {
        background: #666;
        border: none;
        border-radius: 5px;
        padding: 8px;
        margin: 10px;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <p>{{ message }}</p>

      <button id="btn1" @click="changeMessage">
        更改 Vue 的 message 变量为一个随机数
      </button>
      <button id="btn2" @click="destroyVue">销毁当前 Vue 实例</button>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>

    <script>
      window.app = new Vue({
        el: "#app",
        data: {
          message: "最初的数据～"
        },
        beforeCreate() {
          console.group("beforeCreate");
          console.log("%c%s", "color:red", "el     : " + this.$el);
          console.log("%c%s", "color:red", "data   : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
          console.groupEnd();
        },
        created() {
          console.group("created");
          console.log("%c%s", "color:red", "el     : " + this.$el);
          console.log("%c%s", "color:red", "data   : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
          console.groupEnd();

          this.$nextTick(function() {
            console.group("nextTick 被调用");
            console.log("%c%s", "color:red", "注册于：<created> hook");
            console.groupEnd();
          });
        },
        beforeMount() {
          console.group("beforeMount");
          console.log("%c%s", "color:red", "el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red", "data   : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
          console.groupEnd();
        },
        mounted() {
          console.group("mounted");
          console.log("%c%s", "color:red", "el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red", "data   : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
          console.groupEnd();
        },
        beforeUpdate() {
          console.group("beforeUpdate");
          console.log("%c%s", "color:red", "el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red", "data   : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
          console.groupEnd();
        },
        updated() {
          console.group("updated");
          console.log("%c%s", "color:red", "el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red", "data   : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
          console.groupEnd();
        },
        beforeDestroy() {
          console.group("beforeDestroy");
          console.log("%c%s", "color:red", "el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red", "data   : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
          console.groupEnd();
        },
        destroyed() {
          console.group("destroyed");
          console.log("%c%s", "color:red", "el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red", "data   : " + this.$data);
          console.log("%c%s", "color:red", "message: " + this.message);
          console.groupEnd();
        },
        methods: {
          changeMessage() {
            console.log(
              "%c%s",
              "color:#FFF;background:#666;padding:4px;margin:0 6px 0 -10px",
              "changeMessage 方法被调用"
            );
            this.message = Math.trunc(Math.random() * 10000);

            this.$nextTick(function() {
              console.group("nextTick 被调用");
              console.log(
                "%c%s",
                "color:red",
                "注册于：<changeMessage> method"
              );
              console.groupEnd();
            });
          },
          destroyVue() {
            console.log(
              "%c%s",
              "color:#FFF;background:#666;padding:4px;margin:0 6px 0 -10px",
              "destroyVue 方法被调用"
            );
            this.$destroy();
          }
        }
      });
    </script>
  </body>
</html>