Vue组件的this.$el是否始终指向同一个DOM元素？

简单说：不是的，this.$el并不会一直绑定同一个DOM元素，结合你的代码场景，我来拆解几种关键情况：

1. 手动移除DOM后重新挂载的情况 #

你的MText组件里，deleteFun执行this.$el.remove()只是把组件对应的DOM节点从页面里删掉了，但组件实例还活着。如果之后你把这个实例重新挂载到DOM中（比如调用instance.$mount()再插入页面），Vue会重新生成一个全新的DOM元素作为this.$el，这时候它和之前被删掉的那个就不是同一个对象了。

2. 组件根元素被动态替换的场景 #

如果你的组件模板用了条件渲染切换根元素（比如v-if在不同标签间切换），或者用<component :is="...">作为根节点，Vue在切换时会替换掉原来的根DOM元素，this.$el的指向也会跟着更新成新的元素。

给你的代码提个小建议 #

你用Vue.extend创建的组件实例，在没调用$mount()之前，this.$el其实是undefined——只有挂载之后，Vue才会创建对应的DOM元素并赋值给this.$el。

另外，直接操作this.$el.remove()不是Vue推荐的销毁方式哦。更好的做法是用Vue的响应式机制来控制组件的生死（比如在父组件里用v-if控制MText的显示），这样Vue会自动处理DOM清理和实例销毁，避免内存泄漏问题。

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