vue組件異步渲染

vue組件是異步渲染的
匯總data的修改，一次性更新視圖
減少dom的操作次數，提高性能

<template>
  <div id="app">
    <ul ref="ul1">
        <li v-for="(item, index) in list" :key="index">
            {{item}}
        </li>
    </ul>
    <button @click="addItem">添加一項</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
        list: ['a', 'b', 'c']
      }
  },
  methods: {
    addItem() {
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)

        // 1. 異步渲染，$nextTick 待 DOM 渲染完再回調
        // 3. 頁面渲染時會將 data 的修改做整合，多次 data 修改只會渲染一次
        this.$nextTick(() => {
          // 獲取 DOM 元素
          const ulElem = this.$refs.ul1
          // 如果沒加$nextTick,點擊第一次，li的節點是3個（為何不是6個），因為dom是異步渲染，data數據改變不會立刻渲染
          console.log( ulElem.childNodes.length )
        })
    }
  }
}
</script>

 因為不采用異步更新，在每次更新數據都會對當前組件進行重新渲染。所以為了性能考慮，vue 會在本輪數據更新后，再去異步更新視圖。