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

Should I use raw js or jquery to target DOM elements in a Vuejs 3 app?

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

由于 link 是递归的并且很多,我发现很难处理 class 切换(激活、显示、折叠等)它们中的每一个并将它们关联到一个另一个(如果一个是活跃的,其他不应该是)只使用 Vue。 我应该使用 querySelector 或 JQuery 等任何框架来处理它们,还是应该尝试坚持使用纯 Vuejs 方法?

编辑:

我不想收集社区对此的意见。我的目标是务实地理解为什么我应该或不应该操纵 Vue 的 DOM "outside"。

如果您使用的是 Vue,那么让它控制 DOM;直接胡闹只会制造矛盾和祸患。

(React、Angular等其他SPA框架也是如此。)

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

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

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

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

这确实意味着要改变您在过去 jQuery 工作中可能养成的 DOM 工作习惯。这听起来像是你在尝试绘制整个 DOM,然后在其中构建你的控制结构,如果你习惯了 jQuery,这是一种自然的思考方式;在 Vue 中,您需要将所有这些逻辑构建到组件中,以便框架可以为您完成工作。我建议为 link 创建一个 Vue 组件,它管理自己的打开/关闭/活动等状态,仅在“打开”时递归到其子项。然后只需在导航数据的顶部调用一次,而不是像在 jQuery.

中那样在事后直接管理整棵树。