vue中列表渲染中的key的作用

VDOM(虚拟DOM)是惰性的， 它有一个原则， 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的， 删除了第二个之后， 第二个就变成了第一个， 它印象中第一个是红的， 所以就我们认为的第二个变成红的了
解决： 使用key属性
使用：

<li v-for = " (item,index) in list " :key = "item.id">

注意：

1. 优先使用数据中能够识别的， 比如 ： id
2. 最差在用 index
   例如：

Html:
      <div id="app">
	       <ul>
		       <li v-for = " (item,index) in list " :key = "item.id">
		       <p> {
     {
     item.name}} </p>
		       <button @click = "remove(index)"> 删除 </button>
		       <button @click = "changeStyle"> 修改样式 </button>
		       </li>
	       </ul>
       </div>
   
   Js:
	   new Vue({
     
		   el: '#app',
		   data: {
     
			   list: [
				   {
     
					   id: 1,
					   name: 'zhangjun'
				   },
				   {
     
					   id: 2,
					   name: 'yanyabing'
				   }
			   ]
		   },
		   methods: {
     
			   remove(index){
     
			   this.list.splice(index,1)
		   },
			   changeStyle(e){
     
			  	 e.target.parentNode.style.background = 'red' //我是为了给你举例， 这种写法不规范
			   }
		   }
	   })