javascript - 我应该使用原始 js 还是 jquery 来定位 Vuejs 3 应用程序中的 DOM 元素？

Question

 我正在使用 Nodejs 和 Vuejs 3 创建一个应用程序。在这个应用程序中，我制作了一个侧边栏，它从路由文件中获取所有链接并呈现它们。此侧边栏包含一个组件，该组件作为其他递归链接组件列表的父级。

 由于链接是递归的而且很多，我发现很难处理每个链接上的类切换（活动、显示、折叠等）并将它们相互关联（如果一个是活动的，那么其他不应该是）使用只有 Vue。我应该使用 querySelector 或任何框架（如 JQuery）来处理它们，还是应该尝试坚持使用纯 Vuejs 方法？

编辑：

 我不想收集社区对此的意见。我的目标是务实地理解为什么我应该或不应该在 Vue 的“外部”操作 DOM。

标签： javascriptvue.jsdomvuejs3

Answer 1

如果你使用的是 Vue，那么让它控制 DOM；直接胡闹只会造成冲突和祸患。

（这同样适用于其他 SPA 框架，例如 React 和 Angular。）

不接触 DOM 的主要原因是 Vue 通过自己修改 DOM 来工作，并希望完全控制它：在渲染组件时，框架正在删除旧的 DOM 元素、添加新元素、更新事件绑定等；并且其中很多都经过优化，只更新需要更新的 DOM 节点。

如果您进入那里并开始进行 Vue 不知道的直接更改，那么您自己的更改很可能会在下次需要渲染时被 Vue 覆盖，或者您的更改将覆盖 Vue 依赖的绑定.

如果您对 Vue 的生命周期非常了解，并且知道如何控制它何时渲染和不渲染，则可以将两者一起使用——但即便如此，这仍然不是一个好主意。Vue 和 jQuery 做的事情非常相似，但方式完全不同。在 jQuery 中，您构建页面，然后使用 DOM 遍历和事件处理程序来修改它；一切都存在于 DOM 中。在 Vue 中，你构建了一堆组件来管理它们自己的状态和渲染；DOM 基本上是应用程序状态的副作用。

通过尝试将两者结合使用，您将失去它们各自的大部分优势，并且在必须管理两个相互竞争的状态理论和渲染管理（更不用说处理它们之间的数据通信）时引入了很多复杂性。每次我考虑在 Vue 应用程序中嵌入 jQuery 小部件时，结果证明直接在 Vue 中重写小部件要容易得多。

这确实意味着要改变很多使用 DOM 的习惯，这些习惯可能是您从过去的 jQuery 工作中建立起来的。听起来您正在尝试绘制整个 DOM，然后在其中构建您的控制结构，如果您习惯 jQuery，这是一种自然的思考方式；在 Vue 中，您需要将所有这些逻辑构建到组件中，以便框架可以为您完成工作。我建议为一个链接创建一个 Vue 组件，该组件管理自己的打开/关闭/活动状态等，只有在“打开”时才会递归到其子级。然后只需在导航数据的顶部调用一次，而不是像在 jQuery 中那样尝试在事后直接管理整个树。