Vue2组件如何监听jQuery触发的document全局自定义事件并实现完整重载

• 步骤1：在组件生命周期钩子中绑定/解绑全局事件
  事件为jQuery触发的全局自定义事件，直接在myApp组件的mounted钩子中绑定监听，在beforeDestroy钩子中解绑即可避免内存泄漏。
• 步骤2：利用现有load变量实现组件销毁重建
  通过修改v-if绑定的load值，先销毁现有组件内容，等待DOM更新完成后再重新挂载，即可实现完整重载，所有数据、生命周期都会重置到初始状态。

修改后完整组件代码 #

<template>
    <section class="component" v-if="load">
        ...
    </section>
    <div class="loader" v-else>
        ...
    </div>
</template>

<script>
export default {
    name: "myApp",
    data() {
        return {
            load: false,
        }
    },
    mounted() {
        this.initApp();
        // 绑定jQuery触发的全局自定义事件
        $(document).on('someEvent', this.handleComponentReload)
    },
    beforeDestroy() {
        // 组件销毁前解绑事件，避免内存泄漏
        $(document).off('someEvent', this.handleComponentReload)
    },
    methods: {
        initApp() {
            this.load = true;
        },
        handleComponentReload() {
            // 先设为false销毁当前组件内容
            this.load = false
            // 等待DOM更新完成后重新挂载组件，实现完整重载
            this.$nextTick(() => {
                this.initApp()
            })
        }
    }
}
</script>

该方案的重载逻辑是最彻底的，所有组件内的状态、子组件状态都会完全重置，和第一次渲染组件的效果完全一致。如果不需要重置子组件，只需要重置当前组件的data数据，可以把重载逻辑替换为this.$data = this.$options.data.call(this)，再手动调用需要的初始化业务方法即可。

内容的提问来源于stack exchange，提问作者Allmektiger