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

Posted 2023-02-22

【中文标题】我应该使用原始 js 还是 jquery 来定位 Vuejs 3 应用程序中的 DOM 元素？

【英文标题】：Should I use raw js or jquery to target DOM elements in a Vuejs 3 app?

【发布时间】：2021-12-06 11:22:40

【问题描述】：

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

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

编辑：

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

【问题讨论】：

坚持一个框架

查看可能有帮助的类绑定问题：***.com/q/33731939/3462319

添加到@DanielBeck 的评论中，Vue 内部使用了 ShadowDOM，因此您对 jQuery 所做的一切都不会反映在那里，并且可能会在 Vue 重新渲染组件时丢失。

@Thomas 你可能指的是虚拟 DOM。

反过来，使用您当前使用的框架 (Vue) 执行此操作应该是首选，并且没有足够的理由考虑其他选项 (jQuery)。你对 Vue 不够自信不应该被认为是一个正当的理由，因为它是一个捷径。这并没有解释做你想做的事情到底有什么问题（但有几个原因是错误的），但在这个决定中提供了一个合理的观点。

【参考方案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 中那样尝试在事后直接管理整个树。