这是一个创建于 2142 天前的主题，其中的信息可能已经有所发展或是发生改变。
<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') 没有被执行.
 |
1
loy6491 2019-01-11 22:11:58 +08:00 via iPhone
销毁时还要重新查找 DOM ？感觉不会这么设计吧。按理说编辑器创建时就应该有一个实例给你引用，销毁这个就行了。
|
 |
2
jorneyr OP @loy6491 已经保存了 TinyMCE 的对象 editor, 但是不能调用 editor 的函数直接进行销毁, 而是需要 tinymce.remove('#editor') 这个方法.
|
|
3
loy6491 2019-01-11 22:19:23 +08:00 via iPhone
|
 |
5
SilentDepth 2019-01-11 22:34:21 +08:00
用 `ref` 不好吗
|
|
6
jorneyr OP ref 也试过的, beforeDestroy() 里已经是 null
|
 |
7
Fiona7heHuman 2019-01-16 15:50:16 +08:00
可以使用指令 directives,指令的生命周期里面有一个 unbind，指令解绑时的钩子，指令只有在 dom 被销毁时会解绑，试试看！
|
Select Language