Vue中nexttick使用方法、作用、使用场景

1.nexttick

因为Vue数据更新机制是异步更新机制，也就是data中的数据并不是发生改变就立刻更新DOM，而是生成一个队列把数据变化的值添加到队列里面进行一次性更新节约性能，也就是当只有一个数据发生变化的时候等一等等到又多个数据变化时一起变化，等不到多个也会变化。
直白的说，就是我们对data中的数据修改了，对应的视图页面的值也变化了，但是DOM里面的值还是修改前的值会等一会在更新,nextTick的作用就是解决它不立即更新的问题，但不是说用这个函数就让DOM更新了，而是这个函数

2.举例说明

<template>
  <div>
    <h1 ref="msgref">谁最帅：{{ msg }}</h1> 
    <button @click="updataname">修改msg</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "不知道",
    };
  },
  methods:{
    updataname(){
        this.msg='小丁最帅'
        console.log('msgref',this.$refs.msgref.innerHTML);
        this.$nextTick(()=>{
            console.log('msgref修改后的值',this.$refs.msgref.innerHTML);
        })
    },
  },
};
</script>

从上面的距离可以看出我们点击修改了msg的值页面也跟随变化了但是DOM没有更新，如果我们想要拿到修改后的值就要使用nextTick()

3.常用场景

1.created()中想获取DOM可以使用，根据Vue生命周期，页面的DOM时在Mounted()时创建的，在created()时还没有创建。

<template>
  <div>谁最帅：{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "小丁最帅",
    };
  },
  created() {
    console.log('1111');
    this.$nextTick(()=>{
        console.log('222');
    })
  },
  mounted() {
    console.log('333');
    this.$nextTick(()=>{
        console.log('4444');
    })
  },
};
</script>

看这一段代码 打印执行的顺序为 1111—>333—>222---->444,因为DOM在mounted阶段才会创建所以会先打印333在打印222
2.响应式数据变化后获取DOM更新后的状态，一些列表数据的删除增加，我们想要获取列别更新后的高度也可以使用nextTick