Vnode 是vue裡的虛擬dom，真實的html標籤dom物件是會被瀏覽器渲染出來的，每次渲染必定會消耗很多的圖形運算功能，虛擬dom 是一個物件，不會直接渲染到瀏覽器中，

    如果我有1000條資料，我修改了其中兩條，真實的DOM會重新渲染1000條資料，只要發生了變化，就會重新渲染全部資料，虛擬dom 會生成1000個物件 （它是不會被瀏覽器圖形化渲染的），虛擬dom 裡的東西會和真實dom繫結在一起，當資料發生變化 虛擬dom和之前的虛擬dom 會去做資料的比較，當資料發生變化時，才會去更新資料發生改變的那部分真實的dom元素

    但是陣列沒有預設的標識，所以陣列每次改變都要重新排序，效能影響較大，所以在實時偵聽遍歷陣列資料時，需要引入key屬性，用來標識陣列資料，一般使用下標標識

<template>
  <div>
      <ul><!--遍歷陣列時，新增 key 屬性是為了優化vnode-->
        <li 
          v-for="(item,index) in list"
          :key="index" 
          @click="list.push('laowang')"
          >
          {{item}}
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this);
  },
  data() {
    return {
      list: ["zhangsan", "lisi"]
    };
  }
};
</script>

<style>
</style>