建议阅读时间：5 分钟
前言
本篇文章适用于前端方向的同学
正文
为什么当今 Vue、React 这类前端框架（下文简称框架）不建议在代码中直接操作 dom 元素？
我们先看看一些官方的解释
当我们直接操作 DOM 时，会有以下几个问题：
- 性能问题，在浏览器中操作 dom 是一个很耗时的过程，在框架中使用了虚拟 dom 技术对其进行了优化，虚拟 dom 通过对比上一次的 dom 得出一套尽可能少的操作 dom 的方案然后对 dom 进行操作。
- 操作 dom 元素的代码比较面向过程，比较冗长且难以维护和理解，出了 bug 难以定位。
- 操作 dom 需要考虑浏览器兼容问题，不同浏览器操作 dom 元素的接口可能有些许差别，而框架内部则处理好了这些兼容问题，使开发过程中无需考虑。
其实这些原因并不重要
主要还是应该通过数据去驱动视图
框架做了什么
在框架中，我们主需要给框架提供视图的模板和数据，框架就会帮我们去构建 dom 树去渲染页面
简单点说就是我们用代码告诉框架，我给你提供什么数据，你就给我展示什么视图
当我们去更新数据时，框架也会动态的去以较小成本区更新视图
对于框架来说，它希望视图完全由它来控制，不希望你来插手
我们在框架中直接操作 dom，就相当直接控制了视图
我们操作 dom 可能会与框架操作 dom 产生冲突，例如我们给某个 dom 元素添加了一个红色背景，但是框架渲染不会有红色背景，当框架更新视图时，你添加的红色背景就可能被冲掉，这种还是影响较小的，如果你增删或者移动了 dom 元素，这时框架去更新视图是很可能会造成错乱
这种行为就相当于我们在框架的代码中添加了一段我们自己的奇奇怪怪的代码，很可能导致代码出 bug
我真的很想操作 dom 怎么办
现在的框架已经基本没有需要直接操作 dom 的场景了
想操作 dom 说明你想去更新视图
也就说明你的视图有不同的状态，并且可以通过不同的数据去区分不同状态
忘掉面向过程的 dom 操作，请记住这句话，通过改变数据去驱动视图的更新
你可以事先告诉框架不同的状态下你要展示的不同的 UI
当你想要更新视图的时候，你只需要更新这个状态即可
如果你实在实在还是想直接操作 dom，那么请尽量操作本组件中的 dom 元素，不要跨组件操作，这样会极大的增加 debug 成本
结语
若文章中存在错误、缺漏、不足或讲的不清晰的地方，可以帮忙指出，提供一些意见或建议，帮助作者在掘金中一起构建更好的生态环境
希望这篇文章对你能够有所帮助，感谢你的喜欢
