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

<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') 没有被执行.