$nextTick 是干什么的

news/2024/11/17 22:22:24/

在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;疫情还未结束…