Vue和React中都提到的虚拟dom,到底是个什么东西?
真实dom的缺陷
简单的例子:从文档获取一个元素,获取一下他的属性和方法。
1 | var a = document.getElementById('box') |
一个dom节点居然挂了这么多属性和方法……
操作起来能不费劲么?(不再赘述回流和重绘…)
分析一下正常的dom对象
一个简单的<ul>
1 | <ul class="box" id="ipc" style="width:100px;height:50px;background:#666"> |
两个概念
文本节点
和元素节点
(js的node节点不止两种,参见:Js的nodetyope)
简单理解就是,标签内的文本,属于文本节点,标签则是元素节点。
用虚拟dom描述上面的<ul>
1 | var Vdom = { |
利用虚拟dom,构造出真实dom
1 | function createRealDom(Vdom){ |
– 后续更:diff算法和Vue、React虚拟dom对比
- 本文链接: https://anyway521.gitee.io/post/b1838eaa.html
- 最后更新:
- 版权声明: 博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议进行许可,转载请注明出处!