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