面试题：什么是this.$nextTick

codeMing_

已于 2022-08-22 08:56:00 修改

阅读量627

点赞数 1

于 2022-08-16 08:37:55 首次发布

本文链接：https://blog.csdn.net/q879936814/article/details/126355777

版权

官方解释是：将回调函数延迟到下次DOM更新时执行。

听起来有点抽象，个人理解可以是：用于更新数据之后需要立刻直接操作DOM的时候使用，因为Vue虽然有响应式的特性，但是DOM更新和数据是异步的，当然我们以一个用户的角度来看，并没有什么区别，但是我们来看一下下面几个案例就能体会到异步的细节了。

   <template>
     <button ref="box" @click="boxClick">{{a}}</button>
   </template>
   <script>
   export default {
     data(){
        return {
           a: '111'
       }
    },
    methods: {
      boxClick(){
        this.a = '222';
        // 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值；
        console.log(that.$refs.box.innerText);//输出的是111
        this.$nextTick(()=>{
		  console.log(that.$refs.box.innerText);//输出的是222
		})
      }
    },
    created(){
      console.log('1')
      console.log(this.$refs['box'])
      this.$nextTick(()=>{
        console.log(4)
        console.log(this.$refs['box'])
      })
    },
	mounted(){
      console.log(2)
      console.log(this.$refs['box'])
      this.$nextTick(()=>{
        console.log(3)
        console.log(this.$refs['box'])
      })
    }
  }
  // 输出结果： 1 undefined 2 box标签 4 box标签 3 box标签
  </script>

上面的案例大概能涵盖大部分使用情况了，特别讲一下，在created生命周期中如果想修改dom，一定要使用nextTick，因为这个时候Dom还没有挂载，此时想获取DOM肯定是undefined。

总结：
在以下两个情况下需要用到Vue.nextTick()

Vue声明周期的created() 钩子函数进行的DOM操作一定要放在Vue.nextTick() 的回调函数中，因为created() 执行的时候DOM实际上并未进行任何渲染，此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted 钩子函数，因为该函数执行时所有的DOM挂载和渲染都已完成，此时再钩子函数中进行任何DOM操作都不会有问题。
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作应该放进Vue.nextTick() 的回调函数中简而言之，如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick()

----------------------------------------------后续说响应式，留个坑-----------------------------------------------------

DOM异步更新和Vue的响应式密切相关

vue将遍历data对象中所有的属性，并通过 Object.defineProperty 把这些属性全部转为 getter/setter；但是我们是没有办法看到 getter/setter的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。每个组件都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。但watcher不是接到通知就更新dom，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据变更，如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。