Vue key的作用

<div id="app">
    <ul>
      <li
        v-for = "(item,index) in todos"
        :key = "item.id"
      >
        <p> {{ item.task }} </p>
        <div class="btn_box">
          <button @click = "modify"> 修改 </button>
          <button @click = "remove( index  )"> 删除 </button>
        </div>
      </li>
    </ul>
  </div>

  /* 
    key: 
      作用： 给vdom打标记，实现同层级比较
    案例： 

    经验： 
        列表渲染都要加key,key一定是要唯一的标识,最好是id
  */
  new Vue({
    el: '#app',
    data: {
      msg: 'hello ',
      todos: [
        {
          id: 1,
          task: '任务一'
        },
        {
          id: 2,
          task: '任务二'
        }
      ]
    },
    methods: {
      remove ( index ) {
        this.todos.splice( index,1 )
      },
      modify ( e ) {
        // 点击修改让整个li的背景颜色为红色
        const li = e.target.parentNode.parentNode 
        li.style.background = 'red'
      }
    }
  })