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>