虚拟dom && diff算法
1.虚拟dom是什么
它是一个Object对象模型，用来模拟真实dom节点的结构
2.虚拟dom的使用基本流程（前四步骤）
1.获取数据
2.创建vdom
3. 通过render函数解析jsx，将其转换成 vdom结构
4.将vdom渲染成真实dom
5.数据更改了
6.使用diff算法比对两次vdom,生成patch对象
7.根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）
3.diff算法是什么
用来做比对两次vdom结构
4.diff算法运行结束后，返回是什么
返回一个key
注意：vue是一个mvvm框架，Vue高性能的原因之一就是vdom
深化：Vue vdom 比较 React vdom 有何不一样？
//需求：有一个变量count的初始值为0，经过一系列的运算,得到10001，然后将结果写入box中
<div class='box'></div>
<script>
var box = document.querySelect('.box')
var count = 0
//console.time('a')
//for(var i=0;i<10001;i++){
// count++
// box.innerHTML = count //这里操作了10000次dom
//}
//console.timeEnd('a')
///////////////////////////////////////////////////////
console.time('b')
for(var i=0;i<10001;i++){
count++
}
box.innerHTML = count //正常写法操作一次dom
console.timeEnd('b')
</script>
结论：1.更少的dom操作会更加减少时间花费，减少性能损耗
2.所以我们应该 先操作数据 再去操作dom
3.由以上结论慢慢的前端将一个新的概念引入在框架中 （这个概念就是虚拟dom）
虚拟dom
所谓的virtual dom，也就是虚拟节点
<script>
//1.vdom是什么？
//它是一个Object对象模型，用来模拟真实的dom结构
//需求：vdom如何模拟真实dom,如果将来我想再增加一个li，里面的内容为：你好
<div class='box'>
<ul class='list'>
<li>这里是1903</li>
</ul>
</div>
var list = document.querySelect('.list')
var li = documenr.createElement('li')
li.innerHTML = '你好'
list.appendChild(li) //以上的每一步都操作了dom，真实的dom！
</script>
vdom的使用流程
1.获取数据
2.创建虚拟dom
//1.获取数据(ajax,fetch)
var data = {
id:1,
name:'1903'
}
//2.创建vdom
var vdom = {
tag：'div',
attr:{
className:'box'
},
content:[
{
tag:'ul',
content:[
{
tag:'li',
content:data.name //'这里是1903'
}
]
}
]
}
//3.初次渲染vdom（vdom渲染成 真实dom）
var div = document.creatElement('div')
div.calssName = 'box'
var ul = document.creatElement('ul')
var li = document.creatElement('li')
//vue中 使用的是一个叫做jsx语法 + render函数
function render(createElment){
//vu已经封装好这个方法 就是{{}}可以用的原因
}
//但是我们的网页结构一般都是很复杂的，这时候我们使用vdom去模拟dom结构,发现vdom这个对象模型太大了，也 //太长了，所以我们想，如果能在js中也能够书写dom标签结构那就好了，所以结合了js+xml搞出了一个新的语法 //糖 jsx，用jsx来模拟vdom
//通过render函数解析jsx，将其解析成vdom结构
//4.将vdom渲染成真实dom
//5.数据更改了，data.name = '骏哥' 又生成虚拟dom（vdom）结构
//在这之中 //使用diff算法用来做比对两次vdom
//diff算法是比较两个文件的差异，并将两个文件的不同之处，将这个不同之处生成一个补丁对象（patch.js）
//diff算法来源后端
//前端将其应用于虚拟dom的diff算法
//vue中将虚拟dom的diff算法放在了patch.js
//使用js来进行两个对象的比较（vdom 对象模型）
//diff算法是同级比较
//给每一个层级打一个标记，这个标记是一个数字（这个数字就是key）
//6.再通过render函数渲染成真实dom
### 关于diff算法返回的key
<div id='box'>
<ul>
<li v-for = '(item,index) in list' :key = 'item.id'>
<p>{{item.text}}</p>
<div>
<button @click = 'changeStyle'>修改</button>
<button @click = 'remove(index)'>删除</button>
</div>
</li>
</ul>
</div>
<script>
//id为
new Vue({
el:'#app',
data:{
list:[{
id:1,
text:'敲代码1'
}，
{
id：2，
text：'敲代码2'
}
]
},
methods:{
changeStyle(e){
//接下来写的是为了给大家看key的作用，这段代码不要出现
e.target.parentNode.parentNode.style.background = 'red'
//删除以后会有上一层的样式
},
remove(index){
this.list.splice(index,1)
}
}
})
</script>
总结： 虚拟dom的执行步骤
1.获取数据
2.创建虚拟dom（这一步创建的是jsx语法糖，什么是虚拟dom？就是一个对象，里面模拟了真实dom的数据结构）
3.通过render函数解析jsx（js+xml的语法糖）,将其转化成虚拟dom结构，再将虚拟dom渲染成真实的dom
4.当数据更改之后又会生成一次虚拟dom结构，这是时候就需要diff算法对比两次虚拟dom，**不同之处**会生成一个patch对象，（由于diff算法进行的是同级比较，而且会返回一个key值）再根据这个key值将patch对象渲染到页面中改变的结构上。（其他没有改变的地方是不做修改的，这就是虚拟dom的惰性原则）