Vue——虚拟DOM（vnode），优化数组

    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>