$nextTick 是干什么的

news/2024/2/27 17:58:44

在vue中在父组件中可以操作子组件里的方法

在子组件上绑定 :ref = " 自定义名 "   子组件绑定点击事件 @click=" doclick "

在meyhods 里定义执行函数 doClick(){

this.自定义名.$refs.方法名

    得到的就是子组件的dom,在里面就可以找到子组件里的方法

}

但是点击之后你会发现并不生效,此时就需要用到$nextTick

那么$nextTick 是干什么的?

页面的 DOM 还未渲染,这时候也没办法操作 DOM,如果想要操作 DOM,需要使用 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的更新


http://www.ppmy.cn/news/7621.html

相关文章

【NI Multisim 14.0编辑环境——工具栏】

目录 序言 一、工具栏 &#x1f34a;1.“标准”工具栏 &#x1f34a; 2.视图工具栏 &#x1f34a;3.“主”工具栏 &#x1f34a;4.“元器件”工具栏 &#x1f34a;5.“Simulation”&#xff08;仿真&#xff09;工具栏 &#x1f34a;6.“Place probe”&#xff08;放置探针…

对Java中String类的解释

文章目录一、String 的常用方法1.字符串的构造以及字符串常量池2.String 类中对象的比较3.字符串查找4.转化5.字符串替换6.字符串拆分7.字符串截取二、StringBuilder 和 StringBuffer1.引入两者的原因2.相关修改操作的介绍一、String 的常用方法 首先&#xff0c;在介绍 Strin…

前端性能优化(一):指标和工具

目录 一&#xff1a;性能指标和优化目标 1.1.网络加载性能 1.2.用户交互体验 二&#xff1a;RAIL测量模型 2.1.Response&#xff08;响应&#xff09;: 处理事件应在在50ms内完成 2.2.Animation&#xff08;动画&#xff09;: 每10ms产生一帧 2.3.Idle&#xff08;空闲&…

阿里云-数据仓库-全链路大数据开发治理平台-DataWorks的数字世界

一、前言 上文我讲到 阿里云-数据仓库-数据分析开发神器-ODPS &#xff0c;今天我带领大家一起走进神器的成长环境及它的数据世界。 二、 DataWorks是什么 DataWorks基于MaxCompute、Hologres、EMR、AnalyticDB、CDP等大数据引擎&#xff0c;为数据仓库、数据湖、湖仓一体等…

亚马逊---人工智能入门---学习笔记

&#x1f680;write in front&#x1f680; &#x1f4dd;个人主页&#xff1a;认真写博客的夏目浅石. &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​ &#x1f4e3;系列专栏&#xff1a;蓝桥杯算法笔记 &#x1f4ac;总结&#xff1a;希望你看完之…

2023北京老博会,CBIAIE第十届中国国际老年产业博览会

积极响应发展政策&#xff0c;顺应市场发展需求&#xff0c;2023第十届中国国际老年产业博览会8月再举办&#xff1b; 无限发展前景的老年产业&#xff1a;近年来&#xff0c;随着我国老龄化社会的持续加速&#xff0c;使得我国养老问题形势严峻&#xff1b;截止2022年11月&am…

Linux学习笔记——Linux实用操作(二)

04、Linux实用操作 4.6、IP地址、主机名 4.6.1、IP地址、主机名 学习目标&#xff1a; 掌握什么是IP地址掌握什么是主机名掌握什么是域名解析 4.6.1.1、IP地址 1、每一台联网的电脑都会有一个地址&#xff0c;用于和其它计算机进行通讯。 IP地址主要有2个版本&#xff0…

7的2022年终总结

7&的2022年终总结 文章目录7&的2022年终总结1、前言2、技术3、生活4、展望未来1、前言 2022年&#xff0c;终究是不平凡的一年。 2022年2月4日&#xff0c;中国农历大年初四&#xff0c;这一天&#xff0c;北京冬奥会将拉开大幕。 2022年3月份&#xff0c;疫情还未结束…

React学习03-基于脚手架的React应用

初始化脚手架 使用 npx 创建 npx create-react-app 项目名使用 npm install 创建 全局安装create-react-app包&#xff1a; npm install -g create-react-app创建脚手架&#xff1a; create-react-app 项目名npm 镜像 执行 create-react-app时&#xff0c;还会自动安装一…

C++音乐系统

一、前言 2022临近尾声&#xff0c;2023即将来临。 过去的一年&#xff0c;我们同努力&#xff0c;我们共欢笑.。 每一次成功都蕴藏着我们辛勤的劳动。 新的一年即将来到&#xff0c;我们不能停滞不前。 与时俱进 拼搏不懈 共创新的辉煌&#xff01; 二、实现步骤 第一&#x…

java输入语句怎么写

壹哥在前面给大家讲过&#xff0c;Java中给咱们提供了有三个标准的“流”&#xff0c;他们被统称为standard streams。除了负责输出的流之外&#xff0c;还有一个负责输入的标准流&#xff0c;Java中对应的API是System.in。 与标准输出相比&#xff0c;标准输入则复杂的多。尤…

D. Distinct Characters Queries(set维护)

Problem - 1234D - Codeforces 给你一个由小写拉丁字母组成的字符串s和对这个字符串的q个查询。 回顾一下&#xff0c;字符串s的子串s[l;r]就是字符串slsl1...sr。例如&#xff0c;"codeforces "的子串是 "code"、"force"、"f"、&quo…

Linux系统运行时参数命令--网络IO性能监控

目录 5 网络IO性能监控 5.1 性能指标 5.2 网络信息 5.2.1 套接字信息 5.2.2 协议栈统计信息-netstat命令 5.2.3 网络吞吐-sar命令 5.2.4 连通性和延时 5.3 其他常用的网络相关命令 telnet nc mtr连通性测试 nslookup traceroute iptraf强大的网络监控 tcpdump- …

大数据教学实训沙盘介绍

沙盘的作用主要有3个&#xff1a; 1、采集真实数据&#xff0c;解决教学中缺少真实数据的困扰&#xff1b; 2、形成从数据采集、预处理、挖掘建模、模型部署的业务闭环&#xff0c;可以把构建模型发布到沙盘系统上&#xff0c;根据模型产生真实的反馈不断的修正模型精度&#x…

RK3568平台开发系列讲解(Linux系统篇)Linux 管道的使用

🚀返回专栏总目录 文章目录 一、 管道1.1、单向管道1.2、双向管道沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍管道的使用。 一、 管道 在 fork() 成功创建子进程之后,已经打开的文件描述符在父子进程间是共享的,管道就是利用这一特性来工作的。 创建…

爽啊,这么多有趣好玩强大的 Python 库

Python语言简洁、易读以及可扩展&#xff0c;在国内外用 Python 做研究的非常多。 Python 语言向来以丰富的第三方库而闻名。这么多有趣好玩且强大&#xff0c;靠一个人去寻找太难了。 最近粉丝群小伙伴们又罗列了一些&#xff0c;分享给大家。喜欢记得点个赞&#xff0c;加入…

整合Tkinter GUI界面的古诗词词云生成

Python语言提供的wordcloud词云功能&#xff0c;使文本数据的可视化&#xff0c;简单而美丽。但网上的大多数词云生成功能&#xff0c;多半没有可交互的GUI界面&#xff0c;使用起来稍觉不便。笔者结合网上的中文词云功能&#xff0c;以唐诗三百首&#xff0c;宋词三百首&#…

为远程MySQL数据库配置固定的公网TCP地址【内网穿透】

在上篇文章中&#xff0c; 我们成功实现了在公网环境下远程连接内网MySQL数据库。但由于使用的免费的cpolar内网穿透&#xff0c;其所生成的公网地址为随机临时地址&#xff0c;24小时内会发生变化&#xff0c;对于需要长期远程访问的用户来讲非常不方便。因此&#xff0c;本篇…

Qt+C++ TCP发送接收信息客户端与服务端窗体

程序示例精选 QtC TCP发送接收信息客户端与服务端窗体 如需安装运行环境或远程调试&#xff0c;见文章底部微信名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<QtC TCP发送接收信息客户端与服务端窗体>>编写代码&#xff0c;代码整洁&am…

java比较器

一、说明: Java中的对象&#xff0c;正常情况下&#xff0c;只能进行比较: 或 ! 。不能使用 >或 如何实现? 使用两个接口中的任何一个: Comparable 或 Comparator 二、Comparable的使用(自然排序) 1.Comparable接口的使用举例: 1.像string、包装类等实现了Comparable接口…
最新文章