通过案例学习this.$nextTick()

通过案例学习this.$nextTick()

对于this.$nextTick()的用法，官方给出的是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
这句话通俗来说，就是假如我们更改了某个DOM元素的文本，而我们想获得这个更改后的文本数据，需要在DOM更新之后才能拿到。比如以下例子：

 <section>
    <h1 ref="title">{{value}}</h1>
    <el-button @click="get">点击</el-button>
  </section>

  data() {
      return {
        value:'更新前',
      }
    },

    methods: {
  get(){
    this.value='更新后'
    console.log(this.$refs['title'].innerText);
    this.$nextTick(()=>{
      console.log(this.$refs['title'].innerText)
    })
  },
  }

点击按钮之后分别打印出DOM的值，可以看出, 在console.log(this.$refs[‘title’].innerText);这个打印中，获取的是DOM没有更新前的值。而将console.log(this.$refs[‘title’].innerText)写在 this.$nextTick()里，打印出的是DOM更新之后的值。所以在实际项目中，如果需要对DOM更新数据后进行操作，使用this.$nextTick()是很好的选择。