为什么vue避免了dom操作_CSS学习

资料来源：网络整理时间：2023/3/4 4:10:05 共计：3592 浏览

为什么vue避免了dom操作？

什么属于操作dom？需要回答这个这个问题，首先，我们必须明白什么是dom；DOM 是 Document Object Model（文档对象模型）的缩写；

那么，有哪些dom操作呢？比如查找节点、添加节点、删除节点、修改节点属性，修改节点内容等等

对于为什么vue避免了dom操作，其实，根据我的理解，并不是vue避免了dom操作，而是vue的架构中，已经帮我们完成了这些操作，亦或者说是，它是通过数据的改变，去自动驱动dom的改变，在我们平常看来，我们只需要修改数据，那么整个dom结构，文档内容都会自动完成，就好像我们没有进行dom操作一样，其实不然，只是当我们进行数据改变的时候，vue已经帮我们完成了dom操作而已；

这也就是所谓的双向绑定，数据驱动；

比如，当我们需要在对某个元素进行数据绑定时，我们都知道，直接在元素上添加"v-text='text' "当text值变化时，对应元素的内容也就改变了；那么，它里面具体干了些什么呢？

首先，我们应该明白，“v-text”其实是vue中的一个指令，也就是directive；源码如下：

也就是在将v-text绑定到元素上时，首先会判断此元素的元素类型，如果nodetype是3，也就是文本节点时，如果是文本节点，则通过修改其data属性去修改文本内容；如果是其他节点，则通过修改其textContent去修改节点的值；当值变化时，就会执行“this.el[this.attr] = _toString(value)”去修改节点内容；

所以，其实vue并不是避免了dom操作，它其实也进行了dom操作，只是包含在框架内，让我们没有明显感知到而已

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：油用牡丹如何种植更好_CSS学习 | ·下一条：还有必要学习SEO吗_CSS学习