vue 高级特性 $nextTick

 vue 是异步渲染 ,组件更新之后 如果要立即获取最新的dom 使用this.$nextTick()

页面渲染时，会将data修改做整合！！，多次修改data只会渲染一次

<template>
  <div class="header">
    <!-- rights组件 -->
    <p>组件更新之后 如果要立即获取最新的dom 使用this.$nextTick</p>
    <ul ref='ul'>
      <li v-for="(item,index) in list" :key="index">
        {{item}}
      </li>
    </ul>
    <button @click="addDom">添加dom</button>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      list:['aaa','bbb']
    }
  },
  methods: {
    addDom() {
      this.list.push(Date.now())
      this.list.push(Date.now())
      // 这样是获取不到最新dom的
      // let ul = this.$refs.ul
      // console.log(`ul 长度为 ${ul.children.length}`)

      // 这样可以，因为vue是异步渲染，$nextTick会等dom 渲染完之后才会执行回调
      this.$nextTick(()=>{
        let ul = this.$refs.ul
        console.log(`ul 长度为 ${ul.children.length}`)
      })
      // 这样就可以解释为什么是1 会先输出
      console.log(1); 
    },
  },
}
</script>