virtual dom --- 即虚拟dom
1.用js模拟DOM结构
2.DOM变化的对比，放在js层来做（js能实现代码逻辑）
3.提高重绘性能（js单元计算）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">change</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
var data=[
{
name:'张三',
age:22,
address:'广州'
},
{
name:'李四',
age:23,
address:'上海'
},
{
name:'王五',
age:25,
address:'北京'
}
]
//渲染函数
function render(data){
var $container=$('#container');
//清空容器
$container.html(''");
//拼接
var $table=$('<table>')
$table.append($('<tr><td>name</td></tr><tr><td>address</td></tr>'));
data.forEach(function(item){
$table.append($('<tr><td>'+item.name+'</td><td>'+item.address+'</td></tr>'))
})
}
$('#btn-change').click(function(){
data[1].age=30
data[2].age='深圳'
//re-render再次渲染
render(data)
})
//页面加载完立刻执行（初次渲染）
render(data)
</script>
</body>
总结：
1.data=[]
2.render函数
- 找到container节点
- 清空容器
- 创建表格
3.执行render函数
4.点击事件 改变data再次去render(data)重绘
jquery通过实验上面的点击事件是想改变表格中的两个小元素的变化，其他不需要变化，但实际操作的是将整个table删除再去重新渲染，这很不符合预期。
vdom就可以解决这个问题,从而尽量减少DOM操作的性能
网友评论