1：

 $nextTick 的原理： 在下一次DOM  更新循环结束之后, 执行延迟回调再修改数据之后。 立即使用这个
 方法获取更新之后的DOM.

 Vue 在更新DOM 时是异步执行的,  当数据发生变化,  vue 将开启一个异步更新队列。
 视图需要等队列中数据发生变化完成之后， 在统一进行更新。

 $nextTick 本质是一种优化策略。

 $nextTick: 会在DOM 渲染完成之后采取执行。  准确的获取到数据改变之后的结果  ===> 
 
 就需要使用$nextTick() 接受一个回调函数
  
 $nextTick() 是准确的获取到数据改变的之后的结果。


 <template>
   <div class="next-tick">
     <ul ref="ulRef">
       <li v-for="(item,index) in arr"  :key="index">
          {{item}}
       </li>
     </ul>

     <button @click="add"></button>
   </div>
 </template>

<script>
  export default {
    data() {
       return {
         arr: ['A', 'B', 'C']
       }
    },
    methods: {
     add() {
       this.arr.push(Math.random());   // 追加一个随机数

       this.$nextTick(()=> {
         // 获取子元素的个数
         const ulEle = this.$refs.ulRef;
         const length = ulEle.childNodes.length;
       }) 
     }
  }
</script>