我是怎么学习vue11的：v-for绑定和非绑定key的区别

实现方法插入F方法：使用splice//浏览器运行代码后，输入app.letters.splice(2,0,"F》）性能问题先介绍一个概念：diff算法。Vue会先把元素放到虚拟dom中，等待代码段执行完毕（比如执行了一个for循环），vue会比较虚拟dom和真实dom的区别，然后只渲染页面的不同位置，从而提高了性能。本例插入字母，执行for循环，在页面上渲染ABCDE，如下：然后，我们在控制台输入app.letters.splice(2,0,"F")改变数据，Vue会将所有的输入重新放入虚拟dom中，然后将虚拟dom与真实dom进行对比，只修改不同的地方，不修改系统的地方。但是问题是：Vue比较的时候发现只有AB是一样的，其他的都不一样。所以AB不动，其他的都重新渲染到页面上。这种方法效率不高。我们插入一个

F

，希望在重新渲染时只添加一个F，而不是替换所有的FCDE。解决方法是给节点添加一个key属性，做一个唯一标识。{{item}}这个key的值不能随意加。必须保证key和后面要展示的元素是一一对应的。如果我们的key的值使用index:{{item}}会造成如下问题：同一个元素C，数据修改前的Cindex为2，修改后变为3，这样index和item不是一一对应的。必须保证key和后面要显示的item是一一对应的。所以对于这里的key，我们使用item。因为项目不会改变。vue会优先渲染一一对应的，没有对应的再渲染。如果有对应关系，就不会重复渲染，从而提高性能。