1.:key的绑定:
默认情况下,在渲染DOM过程中使用原地复用这样一般情况下,会比较高效,
但是对于循环列表,特别是依赖某种状态的列表,会有一些问题,我们可以通过:key属性
来给每个循环节点添加一个标识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
border:1px solid black;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) of users" :key="user.id">
<input type="checkbox">
{{user.id}} - {{user.name}} - {{user.age}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
users:[
{id:1, name:'yo',age:'17'},
{id:2, name:'xn',age:'22'},
{id:3, name:'wt',age:'20'}
]
}
});
setInterval(() => {
app.users.sort((a,b)=>{
return Math.random()-0.5;
});
}, 1000);
//diff 算法
/*
{
li: '1'
li: '2'
li: '3'
}
*/
</script>
</body>
</html>