vue 高级特性 之 $nextTick

（一）背景：

Vue是异步渲染，data改变后，DOM不会立刻渲染，（立刻获取DOM拿不到）

$nextTick 会在 DOM 渲染之后被触发，以获取最新DOM节点

（二）例子

<template>
  <div>
    <el-button @click="add">add</el-button>
    <ul ref="list">
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [1, 2, 3]
    }
  },
  methods: {
    add () {
      this.list.push(new Date().getTime())
      this.list.push(new Date().getTime())
      this.list.push(new Date().getTime())

      console.log(this.$refs.list.childNodes.length)
    }
  }
}
</script>
<style scoped>
</style>

 

add 按钮一次增加3个，正常情况下应该是 第一次 打印 6， 第二次打印9，而现在这种情况是因为 Vue是异步渲染，data改变后，DOM不会立刻渲染，现在让它立刻打印长度，打印的是上一次渲染好的长度，如何让它每次打印出渲染好的ul列表长度呢？使用nextTick回调，DOM渲染好之后调用回调函数

<template>
  <div>
    <el-button @click="add">add</el-button>
    <ul ref="list">
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [1, 2, 3]
    }
  },
  methods: {
    add () {
      this.list.push(new Date().getTime())
      this.list.push(new Date().getTime())
      this.list.push(new Date().getTime())
      // DOM 渲染好之后回调
      this.$nextTick(() => {
        console.log(this.$refs.list.childNodes.length)
      })
    }
  }
}
</script>
<style scoped>
</style>

这样就能每次拿到正确的长度了

（三）总结：

1. 异步渲染：$nextTick 待 DOM 渲染完成之后再执行里面的回调函数

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

3. 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中

$nextTick是DOM渲染完成后的回调函数