Vue 组件销毁前怎么访问组件内部的 DOM

[jorneyr]

<template>
    <div class="demo">
        <div id="fox">....</div>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log(document.querySelector('#fox')); // 输出: <div id="fox">....</div>
    },
    beforeDestroy() {
        console.log(document.querySelector('#fox')); // 输出: null
    },
    destroyed() {
        console.log(document.querySelector('#fox')); // 输出: null
    }
};
</script>

上面定义了一个简单的 Vue 组件, 组件在销毁的时候需要先访问一下 #fox 这个 DOM, 但是 Vue 提供的生命周期函数里没有找到组件即将销毁, 但是还没有消息 DOM 的钩子.

为什么需要在组件销毁前还要访问一下 DOM 呢? 是因为项目中封装富文本编辑器 TinyMCE 为 Vue 组件方便使用, 组件销毁前需要把 TinyMCE 对象销毁, 但是 beforeDestroy() 或者 destroyed() 中 TinyMCE 对象依附的 DOM 已经访问不到, 导致销毁 TinyMCE 对象的函数 tinymce.remove('#editor') 没有被执行.

[loy6491]

销毁时还要重新查找 DOM ？感觉不会这么设计吧。按理说编辑器创建时就应该有一个实例给你引用，销毁这个就行了。

[jorneyr]

@loy6491 已经保存了 TinyMCE 的对象 editor, 但是不能调用 editor 的函数直接进行销毁, 而是需要 tinymce.remove('#editor') 这个方法.

[loy6491]

https://github.com/lpreterite/vue-tinymce

你看看这个吧

[jorneyr]

@loy6491 谢谢了, 从里面找到销毁编辑器的代码 this.editor.remove(), 可以使用.

[SilentDepth]

用 `ref` 不好吗

[jorneyr]

ref 也试过的, beforeDestroy() 里已经是 null

[Fiona7heHuman]

可以使用指令 directives,指令的生命周期里面有一个 unbind，指令解绑时的钩子，指令只有在 dom 被销毁时会解绑，试试看！