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

百度已收录   阅读次数: 73
2021-10-2913:21:57 发表评论
摘要

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

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

开篇寄语

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

前情提要

内容详情

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

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

一篇文章让你搞懂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/[email protected]"></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就会生成如下的效果:

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

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

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

另外,如果是使用的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!");
    });
  }
};

Vue2和Vue3的区别

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: