VUE3.0,DAY32，生命周期销毁流程_vue3 destroy

作者：盐析白兔 | 2024-03-12 06:31:08

踩

vue3 destroy

VUE3.0,DAY32

- - 销毁流程

销毁流程

销毁流程如下所示，就是当vm.$destroy被调用的时候，就启动销毁流程（即页面数据也不更新了，也不用vue管理了等等）。destroy具有销毁的意思。
在这里插入图片描述
我们自定义了一个销毁按钮，当点击的时候就启动销毁流程，如下图所示，先点击自加按钮，n的值变为2，然后点击销毁按钮，看到控制台console打印输出，已销毁已启动，然后此时在点击自加按钮，发现页面没反应了。这就是说vm已经被销毁了。然后vm被kill前，其工作成果还保留在了页面上（实现页面的n值为2）。

<!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>生命周期销毁流程</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1> 当前的n值是:{{ n }}</h1>
        <button @click="add"> 点我n + 1</button>
        <button @click="bye">点我销毁vm</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    this.n++
                },
                //给点击事件配置相对应的函数bye
                bye() {
                    console.log('销毁已启动');
                    //调用销毁流程启动
                    this.$destroy()
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');

            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeupdated');
            },
            updated() {
                console.log('updated');
            },
        })
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

在这里插入图片描述
根据其vue官网的说法，一旦调用了vm.$destory，那么vue实例，简写为vm，就被完全清除了，断开与其他部分的链接。
注意：官网上说的事件监听器是指的一些自定义的事件。此案例中的@click=add点击事件是原生的DOM事件，所以不会被杀死。我们通过代码来验证下。点击下图中的自加按钮，观察控制台console输出，发现各部分都正常运行，当点击销毁按钮后，在点击自加按钮，虽然页面没反应，但是@click=add这个事件一直被调用。所以，官网说的解绑全部的事件监听器指的是自定义的事件。

<!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>生命周期销毁流程</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1> 当前的n值是:{{ n }}</h1>
        <button @click="add"> 点我n + 1</button>
        <button @click="bye">点我销毁vm</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    //验证是否调用了自定义事件add
                    console.log('add');
                    this.n++
                },
                //给点击事件配置相对应的函数bye
                bye() {
                    console.log('销毁已启动');
                    //调用销毁流程启动
                    this.$destroy()
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');

            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeupdated');
            },
            updated() {
                console.log('updated');
            },
        })
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

在这里插入图片描述
beforeDestroy是临近销毁前执行的生命周期函数，destroyed是销毁完毕执行生命周期函数。绿色框内就是解绑一些监听事件，一些指令等的过程。

注意：这些生命周期函数又叫生命周期钩子。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/222709