100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 为什么vue避免了dom操作 – CSS – 前端 css 图片全屏插件

为什么vue避免了dom操作 – CSS – 前端 css 图片全屏插件

时间:2024-01-08 17:28:08

相关推荐

为什么vue避免了dom操作 – CSS – 前端 css 图片全屏插件

什么属于操作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操作,只是包含在框架内,让大家没有明显感知到而已

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。