vue中更新dom注意点

1.vue更新dom是异步更新的，在程序中修改完数据不会立即更新；
2.更新过程是批量更新的，在一次操作中若修改了三次数据，但是dom只更新一次；这样能减少对性能的消耗；
3.可以在this.$nextTick中进行更新dom后的操作。

<h1>使用nextTick获取最新dom</h1>
    <ul ref="list">
      <li v-for='item in listData' ::key="item.id">
        {{item}}
      </li>
    </ul>
    <button @click="addItem">新增</button>
 data：{
   return{
    listData:["列表项1",'列表项2','列表项3']
 }
    }
methods:{
 addItem(){
      this.listData.push(Date.now() );
      this.listData.push(Date.now() );
      this.listData.push(Date.now() );
       const listRef = this.$refs.list;
       console.log(listRef.childNodes.length);
    },
    }

更新完数据后立即获取到的dom中数据并不是最新的。

<h1>使用nextTick获取最新dom</h1>
    <ul ref="list">
      <li v-for='item in listData' ::key="item.id">
        {{item}}
      </li>
    </ul>
    <button @click="addItem">新增</button>
 data：{
   return{
    listData:["列表项1",'列表项2','列表项3']
 }
    }
methods:{
 addItem(){
      this.listData.push(Date.now() );
      this.listData.push(Date.now() );
      this.listData.push(Date.now() );
      this.$nextTick(()=>{
        const listRef = this.$refs.list;
        console.log(listRef.childNodes.length);
      
      })
    },
    }

我们发现this.$nextTick只更新了一次，而且获取到了最新的dom值