- 虚拟DOM是什么?
要了解虚拟dom首先我们得知道什么是dom,这里简要介绍一下
DOM就是文档对象模型，什么是文档对象模型？这就需要好好看看下面的代码和图了.
<html><head><title>文档标题</title></head><body><a href=“”>我的链接</a><h1>我的标题</h1></body></html>
为了理解DOM，我们至少需要站在浏览器的角度来思考。
浏览器将结构化的文档(html,xml)以树的数据结构读入浏览器内存，并将每个树的子节点定义为一个NODE
当创建好一个页面并加载到浏览器时，DOM就悄然而生，
它会把网页文档转换为一个文档对象，主要功能是处理网页内容。
放一个链接,不懂得同学可以先去看看这个知乎.www.zhihu.com/question/34…
所以虚拟dom就是一个能代表DOM树的对象,通常含有标签名,标签的熟悉,事件监听,子元素们等等
- 虚拟DOM有什么优点?
- 能减少不必要的DOM操作. 如:1.以前我们要在页面上添加100个P标签,是使用JS操作DOM添加100个P标签,而我们的vue和react可以一次性把100个标签一起添加到页面上 2.可以通过DOM diff把多余的操作去掉,比如我们要添加100个标签但其实只有10个标签是新加的 在JS里我们没办法知道谁是新加的只能将100个一起添加到页面上,而DOM diff它可以只添加新增的.
- 跨平台 虚拟dom本质上是一个元素,所以他可以用在小程序,安卓,ios
2.虚拟DOM的缺点?
需要额外的创建函数才能创建虚拟dom,如:react的createElement vue的h 但是可以通过JSX和vue-loader来简化成XML写法 但是这样也会造成严重依赖打包工具
2.DOM diff
**什么是DOM diff呢?**见名知意 DOM的diff(对比)
虚拟DOM不是固定的,他会一直有新的出现,所以DOM diff工作过程是将两个虚拟DOM从头到尾一个一个对比
DOM diff会优先判断节点(标签)是否有变化,如果有变化就记录并更新,如果没有变化则接着对比属性.旧虚拟DOM <div id="example">//不同1
<input v-model="helloworld"/>//不同2 <p>{{ hello }}</p>//不同3 <p>{{ world }}</p>不同4</div>新虚拟DOM 2
<div id="hello">//不同1 <input/>//不同2
<!-- <p>{{ hello }}</p> --> 这里我们屏蔽了hello 所以world就会顶上去. <p>{{ world }}</p>//不同3</div>
P的world就会顶上去,那么它的工作过程 发现不同3 所以会将旧虚拟dom的hello改成world
发现不同4 会将旧虚拟dom的world删除.
聪明的小伙伴已经发现了dom diff的一个bug了,因为我们明明可以直接把旧虚拟dom不同3删除就好了
为什么要先改再删除?所以为了解决这个问题,就有key这个属性的诞生.
