【前端知识之Vue】对NextTick的理解

饭啊饭°

已于 2022-07-18 09:16:13 修改

阅读量4.8k

点赞数 5

分类专栏：前端知识之Vue 文章标签：前端 javascript vue.js

于 2022-06-21 15:04:34 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/125382144

版权

本文探讨了Vue的NextTick机制，包括其定义——在DOM更新后执行回调，用于优化更新策略。NextTick常见于需要在DOM更新后执行操作的场景，如组件内更新。实现原理涉及异步队列callbacks和不同环境下的执行方法，如Promise、MutationObserver或setTimeout。

摘要由CSDN通过智能技术生成

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍应该如何理解NextTick：NextTick是什么、NextTick的使用场景与原理。

一、NextTick是什么

定义

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

理解：Vue在更新DOM时时异步执行的。当数据发生变化时，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。
举例：

<body>
    <div id="app">
        <div>
            <button id="firstBtn" @click="testClick()" ref="aa">{
  {testMsg}}</button>
          </div>
    </div>
</body>
</html>
<script>
    new Vue({
     
        el:'#app',
        data () {
     
    return {
     
      testMsg:"原始值",
    }
  },
  methods:{
     
    testClick:function(){
     
      this.testMsg="修改后的值";
      console.log(this.$refs.aa.innerText);   //that.$refs.aa获取指定DOM，输出