所有栏目 | 云社区 美国云服务器[国内云主机商]
你的位置:首页 > 云社区 » 正文

什么属于操作dom,为什么vue避免了dom操作?

发布时间:2020-04-12 09:05:36

资讯分类:vue  dom  避免  操作  节点  操作  修改
什么属于操作dom,为什么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操作,只是包含在框架内,让我们没有明显感知到而已

什么属于操作dom,为什么vue避免了dom操作?

什么属于操作dom?只要你改变dom的属性值,就是操作dom,我觉得你想说的是虚拟dom吧!虚拟dom是用系统内存模拟dom结构,当你页面改变以后,先改变的是虚拟dom,虚拟dom系统通过算法优化尽量少的操作真实dom来实现同样的效果。

不存在避免dom操作,只是尽量少的操作dom,同时也尽量减少程序员的dom操作,vue指定了一些语法,让我们尽量少的操作dom,其实是vue来代替我们操作了那些dom元素。

留言与评论(共有 0 条评论)
   
验证码:
Top