vue nextTick的理解和使用

nextTick的原理

1、异步说明
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新
2、事件循环说明
简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

应用场景

当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值， 你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

示例代码

 

<template>
  <div>
    <button @click="handle">添加属性</button>
    <div ref="div">{{change}}</div>
  </div>
</template>

<script>
export default {
  name: "Mine",
  data() {
    return {
      change: "old"
    };
  },
  methods: {
    handle(){
        this.change='new'
        console.log(this.$refs.div.textContent)//old
        // 使用nextTick获取最新的DOM结构，nextTick内部返回的是一个promise
        this.$nextTick(()=>{
            console.log(this.$refs.div.textContent)//new
        })
    },
    // 所以也可以写成下面写法
    async handle() {
      this.change = "new";
      console.log(this.$refs.div.textContent);//old
      //nextTick获取最新的DOM结构，nextTick返回的是一个promise
      await this.$nextTick();
      console.log(this.$refs.div.textContent);//new
    }
  }
};
</script>

<style lang="scss">
</style>