vue js中访问DOM好不好？答案

【问题标题】：Is it good to access DOM in vue js?vue js中访问DOM好不好？
【发布时间】：2019-08-08 15:47:33
【问题描述】：

我想知道在 Vue js 应用程序中访问 DOM 可以吗？例如，如果我想将一个元素（div）附加到 body 标签，是否建议在 Vue js 方法中使用document.getElementById？

我没有可用于根据数据创建或删除元素的数据。我真的只是想知道在Vue js中使用document访问DOM是否常见？

类似这样的：

methods:{
 appendToBody(){
   let node = document.createElement("div");
   document.getElementById("#body").appendChild(node);
 }
}

【问题讨论】：

你为什么不使用组件？
如何使用组件将 div 附加到正文？我认为 vue js 只能控制#app 元素而不是正文。
Dynamic DOM elements add/remove with Vue的可能重复
@stdob——不，它帮不了我。没有我想根据该数据添加或删除元素的数据。我只想在 vue js 实例的外面添加一个元素（我的意思是#application 部分）
为什么需要这个？你的用例是什么？

【解决方案1】：

这也取决于您所指的 DOM 的哪一部分。

如果你想改变 Vue 处理的子树，你不应该这样做。您应该依赖响应式属性 conditional rendering 组件。如果你需要访问当前组件的子 DOM 元素，你可以使用refs。

如果您需要更改 Vue 领域之外的 DOM 的一部分，那么请务必这样做。

在您的情况下，不清楚您想要实现什么，并且很难给出明确的答案。

【讨论】：

谢谢！我认为我的案例是第三个。因为我想在 Vue js 实例之外做一些工作。
附带说明，在 Vue 实例中修改 dom 有多糟糕。我正在将 Vue 集成到现有应用程序中，并让 Vue 控制标题、侧边栏和主要内容 div，但是现有应用程序当前正在使用 jQuery 来更改视图并控制该 dom 元素中的所有内容。那样可以么？它显然不是很好，但我可以在那里允许黑盒情况吗？如果必须，我会发布新问题，但我认为我会提出相关问题。
这取决于你的意思。如果你问它是否会工作，它会。在 Vue 和 JQuery 之间划分职责时需要小心。只要您不依赖 Vue 来执行与该 DOM 元素相关的任何事情，它就可以很好地工作。尝试通过 vue 和 jquery 来控制它将会被证明是非常困难的。

【解决方案2】：

你可以在 Vue 中使用像 document.getElementById 这样的 DOM 函数来查找元素，但永远不要使用 DOM 函数来更改 DOM。始终通过更改变量在 Vue 中进行修改并在模板中对其做出反应。

【讨论】：