以编程方式从 DOM 中删除组件 Vue 3

Question

我正在制作类似于带有单元格的工作表，其中使用拖放我可以移动事件，即组件。

因为可以从像这样的任何文件添加组件

import event from "event.vue"

let el = document.getElementById("div")
        const newComponent = createApp(event)
        newComponent.mount(el)

我也试图以某种方式删除它，但我没有运气找到解决方案。 我已经尝试过这个

let element = document.getElementById("newComponent")
element.parentNode.removeChild(element)

这是一种工作，但我无法将新组件添加到同一个 div，因为还有数据集剩余“data-v-app”，我猜这是因为旧组件没有被删除。有没有办法做到这一点或者 vue 没有能力？

Answer 1

v-if

仍然是这里的“官方”做事方式，因为它使用了 Vue 的反应性。
不建议修改 DOM，因为它是命令式的，就像 jQuery：你需要告诉语言如何做事，所以你需要负责查找选择器，要求它在上面做事，并在出现以下情况时循环该过程事件监听器或类似的东西。

VueJS 是声明式的，因此 API 远没有那么复杂。您告诉哪个变量绑定到什么变量，当变量发生变化时，它会根据变化做出相应的反应，而无需您一步步告诉要做什么。

---

当您的项目不断增长时，像 jQuery 或普通 JS (

document.getElementById

) 这样的命令式方法将不会高效，因为您需要描述变量发生变化后发生的所有情况。如果 12 个事物依赖于一个事物，则每个事物都需要两行代码。

在 Vue 中，您将通过 API 设置一些条件，它会自行进行这些更改。那么复杂性就大大降低了。除了拥有强大的指令 + Vue 开发工具来帮助您之外。

---

除此之外，如果你混合使用一些 Vue 状态 + 命令式编码，你将面临两个世界中最糟糕的情况。您将需要做一些时髦的事情来保持反应性+仍然需要编写声明性代码。

因此，人们在需要时使用 Vue 的 API + template refs only。
远离命令式编码：jQuery、手动选择 DOM 元素等...到目前为止，您将拥有更轻松的时间、更低的复杂性和更高的性能。

---

Vue/React 的存在是有原因的，主要是消除复杂性。充分发挥它们的潜力。