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

VUE3.0,DAY32销毁流程销毁流程销毁流程如下所示，就是当vm.$destroy被调用的时候，就启动销毁流程（即页面数据也不更新了，也不用vue管理了等等）。destroy具有销毁的意思。我们自定义了一个销毁按钮，当点击的时候就启动销毁流程，如下图所示，先点击自加按钮，n的值变为2，然后点击销毁按钮，看到控制台console打印输出，已销毁已启动，然后此时在点击自加按钮，发现页面没反应了。这

疯子的梦想＠

5734人浏览 · 2021-09-05 21:25:03

疯子的梦想＠ · 2021-09-05 21:25:03 发布

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>

在这里插入图片描述
根据其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>