原生事件跟自定义事件

问题描述：

我使用

this.$destroy()

去销毁当前的组件实例对象

我同时绑定了原生事件跟自定义事件

我预期的是，销毁之后，原生的事件还能被调用，（控制台有输出），只是响应式丢了

页面真实的展示是：销毁之后，不管是原生的还是自定义的，都挂了，无法再被点击调用

我想跟老师证实的是，是不是销毁组件实例对象之后，不论什么原生不原生，通通会挂掉

代码如下

<h2>当前求和为：{{ number }}</h2>

<button @click="add">点我number++</button>

<button @click="sendStudentName">把学生名给App</button>

<button @click="unBind">解绑atguigu事件</button>

<button @click="death">销毁当前Student组件的实例对象（vc）</button>

</div>

</template>

export default {

name: 'Student',

data() {

return {

name: 'Tom',

sex: '男',

number: 0,

};

methods: {

add() {

console.log('add回调被调用了');

this.number++;

sendStudentName() {

// 触发 student 组件实例身上的 atguigu 事件

this.$emit('atguigu', this.name, 666, 888, 999);

this.$emit('demo');

unBind() {

// this.$off('atguigu'); //解绑一个自定义事件

// this.$off(['atguigu', 'demo']); //解绑多个自定义事件

this.$off(); //解绑所有自定义事件

death() {

this.$destroy(); // 销毁了当前Student组件的实例对象（vc）

};

</script>

.student {

background-color: pink;

padding: 5px;

margin-top: 30px;

}

</style>

清夏_ 2023-01-12

源自：vue基础入门（上） 1-1 初学编写 HelloWorld 和 Counter

收起

1回答

好帮手慕星星 2023-01-12 15:06:11

同学你好，销毁组件实例后，页面已经渲染的元素节点，所有渲染完成的数据不会销毁，只是没有Vue 的管理了（无无响应式）；会移除watch监听，子组件，自定义事件等，原生的事件回调移除不了。

同学的代码无法测试，可以用下面的代码：

<template>
    <div id="root">
        <h2>当前的n 值为{{n}}</h2>
        <button @click="add"> 点我n++</button>
        <button @click="on"> 添加自定义事件</button>
        <button @click="off"> 卸载自定义事件</button>
        <button @click="bey"> 点我销毁</button>
    </div>
</template>
<script>
export default {

    name: 'Student',
    data() {
        return {
            n: 1,
        }

    },
    methods: {
        add() {
            console.log("调用了 add ")
            this.n++;
            this.$emit('test')

        },
        bey() {
            console.log("销毁完成");
            this.$destroy();
        },
        on() {
            this.$on('test', () => {
                console.log("添加上了自定义事件");
            })
            console.log('调用了on')

        },
        off() {
            this.$off();
        }
    },
    watch: {
        n() {
            console.log("监听器监听到了 n 发生了变化 ");
        }
    },

    mounted() {
        console.log("mounted");
    },
    beforeUpdate() {
        console.log("beforeUpdate:", this.n);
    },
    updated() {
        console.log("updated:", this.n);
        this.$emit('test')
    }

}
</script>

销毁后点击‘add’按钮，会输出‘add’，但是n值不会变化

自己测试下，祝学习愉快！

收起回答

提问者清夏_ #1

单独的 .vue 文件，应该怎么去运行在页面查看
将结构跟脚本放在 .html 文件中。引入 vue 的cdn 去查看吗？

刚才我自己的代码重新运行功能又正常了，真是奇怪
页面显示就是跟老师说的那样，除了自定义事件之外，原生的事件回调还是可以触发，只是页面没有响应式

2023-01-12 15:24:04

好帮手慕星星回复提问者清夏_ #2

1、放在自己的vue项目中，加一个页面，加一个对应路由，在地址栏中输入对应路由查看

2、也可以放在html文件中，引入vue2.x链接查看，例如：

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>当前的n 值为{{n}}</h2>
        <button @click="add"> 点我n++</button>
        <button @click="on"> 添加自定义事件</button>
        <button @click="off"> 卸载自定义事件</button>
        <button @click="bey"> 点我销毁</button>
    </div>

    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1,
                };

            },
            methods: {
                add() {
                    console.log("调用了 add ");
                    this.n++;
                    this.$emit('test');

                },
                bey() {
                    console.log("销毁完成");
                    this.$destroy();
                },
                on() {
                    this.$on('test', () => {
                        console.log("添加上了自定义事件");
                    });
                    console.log('调用了on');

                },
                off() {
                    this.$off();
                }
            },
            watch: {
                n() {
                    console.log("监听器监听到了 n 发生了变化 ");
                }
            },

            mounted() {
                console.log("mounted");
            },
            beforeUpdate() {
                console.log("beforeUpdate:", this.n);
            },
            updated() {
                console.log("updated:", this.n);
                this.$emit('test');
            }
        });
    </script>
</body>

</html>

能正常运行即可。

2023-01-12 16:42:43