Vue中的真实DOM，虚拟DOM，diff算法

v-for就地更新

 <div id="app">
     <ul>
       <li v-for="item in arr">
         {
  {item}}
       </li>
     </ul>
     <button @click="add">新增</button>
  </div>

  <script>
    new Vue({
     
      el:"#app",
      data:{
     
         arr:['老大',"老二","老三"]
      },
      methods:{
     
        add(){
     
          this.arr.splice(1,0,"新来的")
        }
      }
    })
  </script>

实现在中间插入新来的。点击新增，数据更新

js原生数组变化

数组变化，把整个数组重新渲染 会影响重绘和回流(页面布局)

v-for更新

循环出新的虚拟DOM解构，和旧的虚拟DOM结构对比，复用标签****就地更新内容—提高性能