一篇文章让你搞懂Vuejs的生命周期

2021-10-2913:21:57 发表评论

摘要

前一篇文章介绍了如何开发组件的基础和高级用法，具体可以参看下方的前情提要，本篇文章则是延续上篇，既然了解了如何开发组件，那么就意味着会需要考虑到Vuejs的生命周期，本篇就以图文结合的形式来一起探究Vuejs的生命周期是如何运转的……

分享至：

开篇寄语

前一篇文章介绍了如何开发组件的基础和高级用法，具体可以参看下方的前情提要，本篇文章则是延续上篇，既然了解了如何开发组件，那么就意味着会需要考虑到Vuejs的生命周期，本篇就以图文结合的形式来一起探究Vuejs的生命周期是如何运转的。

前情提要

内容详情

以下内容使用的是Vue3版本，虽然Vue2版本与之区别并不是很大。

先来看一下官方文档给出的那张Vuejs实例的生命周期图，如下图所示：

直接看可能会有些不明白，咱们将之转化为可以运行的编程代码，可以看得更加清楚，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue Demo</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1>Life Cycle</h1>
        <div>{{ msg }}</div>
        <hr>
        <h3>Test updated , beforeUpdated and unmounted</h3>
        <button @click="handlerUpdate">Update</button>
        <button @click="handlerDestroy">Destroy</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: 'hello vue'
                }
            },
            methods: {
                handlerUpdate: function() {
                    this.msg = this.msg.split("").reverse().join("");
                },
                handlerDestroy: function() {
                    app.unmount();
                }
            }, //按照示意图依次调用
            beforeCreate: function() {
                console.log("beforeCreate");
            },
            created: function() {
                console.log("created");
            },
            beforeMount: function() {
                console.log('beforeMount')
            },
            mounted: function() {
                console.log('mounted')
            },
            beforeUpdate: function() {
                console.log("beforeUpdate")
            },
            updated: function() {
                console.log("updated");
            },
            beforeUnmount: function() {
                console.log("beforeUnmount")
            },
            unmounted: function() {
                console.log("unmounted");
            },
        });
        app.mount('#app');
    </script>
</body>

</html>

生成效果如下图所示，当点击Update就会生成如下的效果：

当按下Destroy后，调试台打印出来的内容如下：

另外，如果是使用的cli建立的项目，即生成了app.vue，那么生命周期的验证可以这样写，可以看出区别还是很大的：

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured
} from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Before Mount!");
    });
    onMounted(() => {
      console.log("Mounted!");
    });
    onBeforeUpdate(() => {
      console.log("Before Update!");
    });
    onUpdated(() => {
      console.log("Updated!");
    });
    onBeforeUnmount(() => {
      console.log("Before Unmount!");
    });
    onUnmounted(() => {
      console.log("Unmounted!");
    });
    onActivated(() => {
      console.log("Activated!");
    });
    onDeactivated(() => {
      console.log("Deactivated!");
    });
    onErrorCaptured(() => {
      console.log("Error Captured!");
    });
  }
};