立即前往

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
查看全部活动
热门活动
  • 智算采购季 热销S6云服务器2核4G限时88元/年起,部分主机可加赠对象存储组合包!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 一键部署Llama3大模型学习机 0代码一键部署,预装最新主流大模型Llama3与StableDiffusion
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 产品能力
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
    • 关系数据库SQL Server版
    • 企业主机安全
    • 云防火墙
    • CDN加速
    • 物理机
    • GPU云主机
    • 天翼云电脑(政企版)
    • 天翼云电脑(公众版)
    • 云主机备份
    • 弹性云主机
      搜索发现
      关系数据库SQL Server版企业主机安全云防火墙CDN加速物理机GPU云主机天翼云电脑(政企版)天翼云电脑(公众版)云主机备份弹性云主机
    • 文档
    • 控制中心
    • 备案
    • 管理中心
    • 登录
    • 免费注册

    Vue中的$nextTick

    首页 知识中心 其他 文章详情页

    Vue中的$nextTick

    2025-02-21 08:55:32 阅读次数:11

    DOM,Vue,函数,异步,更新

    Vue中的$nextTick有什么作用?

     

    Vue中的

    一、NextTick是什么

    官方对其的定义

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

    什么意思呢?

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

    举例一下

    Html结构

    <div id="app"> {{ message }} </div>

    构建一个vue实例

    const vm = new Vue({
      el: '#app',
      data: {
        message: '原始值'
      }
    })

    修改message

    this.message = '修改后的值1'
    this.message = '修改后的值2'
    this.message = '修改后的值3'

    这时候想获取页面最新的DOM节点,却发现获取到的是旧值

    console.log(vm.$el.textContent) // 原始值

    这是因为message数据在发现变化的时候,vue并不会立刻去更新Dom,而是将修改数据的操作放在了一个异步操作队列中

    如果我们一直修改相同数据,异步操作队列还会进行去重

    等待同一事件循环中的所有数据变化完成之后,会将队列中的事件拿来进行处理,进行DOM的更新

    为什么要有nexttick

    举个例子

    {{num}}
    for(let i=0; i<100000; i++){
        num = i
    }

    如果没有 nextTick 更新机制,那么 num 每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图),有了nextTick机制,只需要更新一次,所以nextTick本质是一种优化策略

    二、使用场景

    如果想要在修改数据后立刻得到更新后的DOM结构,可以使用Vue.nextTick()

    第一个参数为:回调函数(可以获取最近的DOM结构)

    第二个参数为:执行函数上下文

    // 修改数据
    vm.message = '修改后的值'
    // DOM 还没有更新
    console.log(vm.$el.textContent) // 原始的值
    Vue.nextTick(function () {
      // DOM 更新了
      console.log(vm.$el.textContent) // 修改后的值
    })

    组件内使用 vm.$nextTick() 实例方法只需要通过this.$nextTick(),并且回调函数中的 this 将自动绑定到当前的 Vue 实例上

    this.message = '修改后的值'
    console.log(this.$el.textContent) // => '原始的值'
    this.$nextTick(function () {
        console.log(this.$el.textContent) // => '修改后的值'
    })

    $nextTick() 会返回一个 Promise 对象,可以是用async/await完成相同作用的事情

    this.message = '修改后的值'
    console.log(this.$el.textContent) // => '原始的值'
    await this.$nextTick()
    console.log(this.$el.textContent) // => '修改后的值'

    三、实现原理

    callbacks也就是异步操作队列

    callbacks新增回调函数后又执行了timerFunc函数,pending是用来标识同一个时间只能执行一次

    export function nextTick(cb?: Function, ctx?: Object) {
      let _resolve;
    ​
      // cb 回调函数会经统一处理压入 callbacks 数组
      callbacks.push(() => {
        if (cb) {
          // 给 cb 回调函数执行加上了 try-catch 错误处理
          try {
            cb.call(ctx);
          } catch (e) {
            handleError(e, ctx, 'nextTick');
          }
        } else if (_resolve) {
          _resolve(ctx);
        }
      });
    ​
      // 执行异步延迟函数 timerFunc
      if (!pending) {
        pending = true;
        timerFunc();
      }
    ​
      // 当 nextTick 没有传入函数参数的时候,返回一个 Promise 化的调用
      if (!cb && typeof Promise !== 'undefined') {
        return new Promise(resolve => {
          _resolve = resolve;
        });
      }
    }

    timerFunc函数定义,这里是根据当前环境支持什么方法则确定调用哪个,分别有:

    Promise.then、MutationObserver、setImmediate、setTimeout

    通过上面任意一种方法,进行降级操作

    export let isUsingMicroTask = false
    if (typeof Promise !== 'undefined' && isNative(Promise)) {
      //判断1:是否原生支持Promise
      const p = Promise.resolve()
      timerFunc = () => {
        p.then(flushCallbacks)
        if (isIOS) setTimeout(noop)
      }
      isUsingMicroTask = true
    } else if (!isIE && typeof MutationObserver !== 'undefined' && (
      isNative(MutationObserver) ||
      MutationObserver.toString() === '[object MutationObserverConstructor]'
    )) {
      //判断2:是否原生支持MutationObserver
      let counter = 1
      const observer = new MutationObserver(flushCallbacks)
      const textNode = document.createTextNode(String(counter))
      observer.observe(textNode, {
        characterData: true
      })
      timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter)
      }
      isUsingMicroTask = true
    } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
      //判断3:是否原生支持setImmediate
      timerFunc = () => {
        setImmediate(flushCallbacks)
      }
    } else {
      //判断4:上面都不行,直接用setTimeout
      timerFunc = () => {
        setTimeout(flushCallbacks, 0)
      }
    }

    无论是微任务还是宏任务,都会放到flushCallbacks使用

    这里将callbacks里面的函数复制一份,同时callbacks置空

    依次执行callbacks里面的函数

    function flushCallbacks () {
      pending = false
      const copies = callbacks.slice(0)
      callbacks.length = 0
      for (let i = 0; i < copies.length; i++) {
        copies[i]()
      }
    }

     $nextTick()

    绑定在实例上的 nextTick() 函数。

    和全局版本的 nextTick() 的唯一区别就是组件传递给 this.$nextTick() 的回调函数会带上 this 上下文,其绑定了当前组件实例。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>nextTick</title>
    </head>
    <body>
      <div id="app">
        <div ref="oDiv">{{ count }}</div>
        <button @click="add">加1</button>
      </div>
    </body>
    <script src="../lib/vue.global.js"></script>
    <script>
      Vue.createApp({
        data () {
          return {
            count: 10
          }
        },
        methods: {
          add () {
            this.count++
            console.log(1, this.count) // 11
            // 获取dom节点真实的值
            console.log(2, this.$refs.oDiv.innerHTML) // 10
    ​
            // 借助于 nextTick 函数 获取真实的DOM的值
            // 上啦加载 - 滚动条滚动到一定距离,加载数据
            // 瀑布流布局时,实时获取每一列的高度,将下一个数据插入到高度最低的那一列
            this.$nextTick(() => {
              console.log(3, this.$refs.oDiv.innerHTML) // 11
            })
          }
        }
      }).mount('#app')
    </script>
    </html>

    小结:

    1. 把回调函数放入callbacks等待执行

    2. 将执行函数放到微任务或者宏任务中

    3. 事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调

    版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://qingshan09.blog.csdn.net/article/details/134551336,作者:前端青山,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

    上一篇:【verbs】ibv_get_cq_event|ibv_ack_cq_events()

    下一篇:ES6中数组新增了哪些扩展?

    相关文章

    2025-04-23 08:18:38

    基础—SQL—DQL(数据查询语言)聚合函数

    聚合函数指的是讲一列数据作为一个整体,进行纵向的计算。

    2025-04-23 08:18:38
    函数 , 员工 , 操作 , 查询 , 统计 , 聚合
    2025-04-23 08:18:38

    C语言:深入理解指针(1)

    C语言:深入理解指针(1)                                                  

    2025-04-23 08:18:38
    const , 内存 , 函数 , 变量 , 地址 , 字节 , 指针
    2025-04-23 08:18:32

    创建型模式-单例模式

    单例模式是一种创建型的设计模式,主要用于在当前项目中需要实例化一个对象的情况。

    2025-04-23 08:18:32
    函数 , 创建 , 单例 , 实例 , 静态
    2025-04-23 08:18:32

    Qt 中文件操作

    Qt中文件的操作一般使用的是QFile类。QFile是一种用于读取和写入文本、二进制文件和资源的I/O设备。QFile可以单独使用,或者更方便地与QTextStream或QDataStream一起使用。可进行文件的读写,拷贝。删除等操作。

    2025-04-23 08:18:32
    使用 , 函数 , 文件
    2025-04-23 08:18:32

    行为模式---观察者模式

    观察者模式是设计模式的行为模式,是定义一种阅读机制。它的核心思想是定义对象间的一对多的依赖关系,当有一个对象发生改变之后通知多个观察对象。

    2025-04-23 08:18:32
    函数 , 对象 , 模式 , 观察者 , 订阅
    2025-04-23 08:18:32

    TCP协议传输过程

    TCP协议传输过程

    2025-04-23 08:18:32
    函数 , 变量 , 接字
    2025-04-22 09:44:09

    【C语言小游戏--猜数字】

    【C语言小游戏--猜数字】

    2025-04-22 09:44:09
    代码 , 函数 , 随机数
    2025-04-22 09:28:19

    【数据结构】时间复杂度与空间复杂度

    【数据结构】时间复杂度与空间复杂度

    2025-04-22 09:28:19
    函数 , 复杂度 , 时间 , 空间 , 算法
    2025-04-22 09:28:19

    【C++】初识类和对象

    【C++】初识类和对象

    2025-04-22 09:28:19
    函数 , 对象 , 成员 , 指针 , 访问
    2025-04-22 09:27:28

    啥,凭什么Python中函数的返回值可以有多个?

    啥,凭什么Python中函数的返回值可以有多个?

    2025-04-22 09:27:28
    Python , 函数 , 参数 , 形参 , 返回值
    查看更多
    推荐标签

    作者介绍

    天翼云小翼
    天翼云用户

    文章

    32777

    阅读量

    4833210

    查看更多

    最新文章

    TCP协议传输过程

    2025-04-23 08:18:32

    行为模式---观察者模式

    2025-04-23 08:18:32

    Qt 中文件操作

    2025-04-23 08:18:32

    创建型模式-单例模式

    2025-04-23 08:18:32

    指针的理解(四)完结

    2025-04-22 09:27:17

    DOM和树结构之间怎么相互转换

    2025-04-18 07:11:02

    查看更多

    热门文章

    Neon Intrinsics各函数介绍

    2023-04-10 08:53:07

    python学习——函数的参数

    2023-04-04 08:09:07

    自定义函数基础(内有实操)

    2023-03-15 09:28:04

    如何查看Vue使用的版本

    2023-05-04 09:34:09

    Vue课程55-强调v-for中key值得注意点

    2023-05-18 09:33:22

    celery-01-异步任务模块-解决发送邮件的延时问题

    2023-03-30 09:20:04

    查看更多

    热门标签

    linux java python javascript 数组 前端 docker Linux vue 函数 shell git 容器 spring 节点
    查看更多

    相关产品

    弹性云主机

    随时自助获取、弹性伸缩的云服务器资源

    天翼云电脑(公众版)

    便捷、安全、高效的云电脑服务

    对象存储

    高品质、低成本的云上存储服务

    云硬盘

    为云上计算资源提供持久性块存储

    查看更多

    随机文章

    const函数与非const函数在不同情况下的调用情况

    Vue封装组件库-input组件

    celery-01-异步任务模块-解决发送邮件的延时问题

    Vue 3 x JSX 语法全面指南(因为项目使用了naiveUI组件库才逐渐接触了vue的JSX语法)

    React-Hooks这一篇就够了

    Matplotlib 安装及基础使用指南

    • 7*24小时售后
    • 无忧退款
    • 免费备案
    • 专家服务
    售前咨询热线
    400-810-9889转1
    关注天翼云
    • 权益商城
    • 天翼云APP
    • 天翼云微信公众号
    服务与支持
    • 备案中心
    • 售前咨询
    • 智能客服
    • 自助服务
    • 工单管理
    • 客户公告
    • 涉诈举报
    账户管理
    • 管理中心
    • 订单管理
    • 余额管理
    • 发票管理
    • 充值汇款
    • 续费管理
    快速入口
    • 权益商城
    • 文档中心
    • 最新活动
    • 免费试用
    • 信任中心
    • 天翼云学堂
    云网生态
    • 甄选商城
    • 渠道合作
    • 云市场合作
    了解天翼云
    • 关于天翼云
    • 天翼云APP
    • 服务案例
    • 新闻资讯
    • 联系我们
    热门产品
    • 云电脑
    • 弹性云主机
    • 云电脑政企版
    • 天翼云手机
    • 云数据库
    • 对象存储
    • 云硬盘
    • Web应用防火墙
    • 服务器安全卫士
    • CDN加速
    热门推荐
    • 云服务备份
    • 边缘安全加速平台
    • 全站加速
    • 安全加速
    • 云服务器
    • 云主机
    • 智能边缘云
    • 应用编排服务
    • 微服务引擎
    • 共享流量包
    更多推荐
    • web应用防火墙
    • 密钥管理
    • 等保咨询
    • 安全专区
    • 应用运维管理
    • 云日志服务
    • 文档数据库服务
    • 云搜索服务
    • 数据湖探索
    • 数据仓库服务
    友情链接
    • 中国电信集团
    • 189邮箱
    • 天翼企业云盘
    • 天翼云盘
    ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
    公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
    • 用户协议
    • 隐私政策
    • 个人信息保护
    • 法律声明
    备案 京公网安备11010802043424号 京ICP备 2021034386号