nextTick的应用和原理理解
一.代码的理解
<template><div id="app"><div></div><button @click="fn" ref="box"> {{ name }}</button></div>
</template><script>
export default {data: function () {return {name: "张三",};},mounted(){},methods:{fn(){this.name="李四"console.log(this.$refs.box.innerHTML);},},name: "App",components: {},
};
</script><style></style>
这些代码大家可以看下,template模版双向绑定的是张三这个对象,页面上显示的也是:
在点击按钮之后发生更改,将张三这个对象-------------------李四;
可以看出视图上发生了更改,张三变成了李四。
但是打印出来的DOM还是张三,这是为什么呢?
通过查阅资料,大概知道了些,通过Watcher收集页面中的数据状态变化,当状态发生改变的时候,收集页面的状态变化,如果状态改变一次就去更新一次DOM,这样是极大程度上浪费的一种表现,那么怎么样才能解决这个问题呢,我认为的是等状态全部更新完毕,收集完毕之后,在去使用模版的渲染方式,去完成页面的渲染,来达到最优的效果,因为DOM的渲染是异步的,在这个过程中是在任务队列中执行的,JS是一个单线程的语言,同步任务直接在主线程中就执行了,遇到异步任务我们不可能去等任务执行完在执行下一行:
1.DOM1的渲染添加到任务队列
2.DOM2的渲染添加到任务队列
主线程的任务执行完毕后,执行任务队列中的异步任务,也就是DOM的渲染。
但是在这个过程中,我们要等待所有的DOM都添加到任务队列中,所以这个时候不去执行,而是等到下个周期任务队列查找的时候去执行,至于下个周期是什么时候,我认为可能就是另外一个页面开始执行的时候,因此我们获得到的DOM是属于上次更新的,并不是更新完之后的DOM,所以上面的例子就可以看出,我们将张三----->李四的时候,去打印他的DOM任然是张三。
如果想要获取李四怎么办:
fn() {this.name = "李四";this.$nextTick(() => {console.log(this.$refs.box.innerHTML);});
我们可以使用,vue提供的一个api,$nextTick,以回调函数的形式来获取,更新完之后的DOM,
二.应用方面
上述的问题我们讲了,DOM的更新是异步的,这个时候我们在做大屏可视化的时候,有些地方是要获取实时的DOM的,这个时候就可以利用这个APi,完成视图的渲染,如果要获取实时的DOM都可以应用这个API。
相关文章:
nextTick的应用和原理理解
一.代码的理解 <template><div id"app"><div></div><button click"fn" ref"box"> {{ name }}</button></div> </template><script> export default {data: function () {return {n…...
.Net Core 微服务之Consul
目录 一、微服务架构 vs 单体架构 1. 单体架构介绍 2. 微服务架构介绍 3. 微服务架构 vs 单体架构的区别 4. 适用场景和选择 4.1 微服务架构的适用场景和选择 复杂度和规模需求高的应用程序: 技术栈的灵活性需求: 快速迭代和持续交付: 高可用性和容错性的要求: 4…...
速盾:cdn流量调度
CDN(Content Delivery Network)是指内容分发网络,它是一种通过部署在不同地理位置的服务器来传递互联网内容的技术。CDN的主要目标是通过将内容放置在离用户最近的服务器上,来提高用户访问网站的响应速度和性能。 CDN的流量调度是…...
Windows批处理入门:快速掌握批处理脚本的基本技巧
一、前言 在Windows操作系统中,批处理文件(Batch File)是一种非常实用的工具,它允许用户通过简单的命令行脚本来自动化各种任务。无论是系统管理员、开发人员,还是普通用户,掌握批处理文件的基本知识都能极…...
【C++之unordered_set和unordered_map的模拟实现】
C学习笔记---025 C之unordered_set和unordered_map的模拟实现1、unordered_set的模拟实现2、unordered_map的模拟实现 C之unordered_set和unordered_map的模拟实现 前言: 前面篇章学习了C对unordered_set和unordered_map的认识和应用,接下来继续学习&am…...
服务器使用别人的conda
很多台机器都共用一个conda时候,可以在conda的bin目录下运行./conda init来使得该环境机器用这个conda作为默认的conda。 但是有个环境报错: -bash: ./conda: /apdcephfs_cq8/share_1367250/jaimeji/anaconda/jaime_conda/bin/python: bad interpreter:…...
农村程序员陈随易2024年中总结
今天是 2024年7月1日,时间如白驹过隙,今年已去其一半。 总结一下今年上半年的情况,给大家提供一些参考和建议。 希望大家关注一下公众号 陈随易,有些内容只在公众号发表。 先看看我的年初计划,这个在今年年初的时候&…...
Spring Boot中的日志管理最佳实践
Spring Boot中的日志管理最佳实践 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们来探讨一下在Spring Boot应用中如何有效管理日志,确保系统…...
python基础语法 004-2流程控制- for遍历
1 遍历 1.1 什么是遍历? 可以遍历的元素:字符串、列表、元组、字典、集合字符串是可以进行for 循环。(容器对象,序列)可迭代对象iterable 例子: 1 )、for遍历字符串: name xiao…...
【高考志愿】医学
目录 一、明确职业定位与兴趣 二、选择大学与专业 三、考虑身体条件 四、了解录取规则 五、考虑选科与成绩 六、注意志愿填报策略 七、关注就业前景 八、资深医生的建议 高考志愿填报学医时,考生需要综合考虑多个因素,确保自己能够做出明智的选择…...
音视频开发31 FFmpeg 编码- avcodec_find_encoder和avcodec_find_encoder_by_name
avcodec_find_encoder /** * Find a registered encoder with a matching codec ID. * * param id AVCodecID of the requested encoder * return An encoder if one was found, NULL otherwise. */ AVCodec *avcodec_find_encoder(enum AVCodecID id); 那么这个 AVCodec…...
大模型压缩:基于贝叶斯优化的自适应低秩分解
1.方法 1.1 基于特征的高维空间低秩分解 PCA已经是老朋友了,每次一说主成分都会出现PCA。这篇文章1利用预训练数据的子集作为校准数据集 D c a l { x i } i 1 n \mathcal{D}_{cal}\{x_{i}\}_{i1}^{n} Dcal{xi}i1n,首先用校准数据集的样本协方差…...
【Python函数编程实战】:从基础到进阶,打造代码复用利器
文章目录 🚋前言🚀一、认识函数🌈二、函数定义❤️三、函数调用⭐四、实参与形参💥1. 形式参数🚲2. 实际参数🔥1. 位置参数☔2. 关键字参数🎬3. 默认参数🔥4. 可变数量参数(不定长参…...
ZooKeeper 应用场景深度解析
✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心哦!✨✨ 🎈🎈作者主页: 喔的嘛呀🎈🎈 目录 引言 1.…...
动手学深度学习(Pytorch版)代码实践 -计算机视觉-41目标检测数据集
41目标检测数据集 import os import pandas as pd import torch import torchvision import matplotlib.pylab as plt from d2l import torch as d2l# 数据集下载链接 # http://d2l-data.s3-accelerate.amazonaws.com/banana-detection.zip# 读取数据集 #save def read_data_b…...
2.2章节python的变量和常量
在Python中,变量和常量有一些基本的概念和用法,但需要注意的是,Python本身并没有内置的“常量”类型。然而,程序员通常会遵循一种约定,即使用全部大写的变量名来表示常量。 一、变量 在Python中,变量是一…...
豆包文科成绩超了一本线,为什么理科不行?
卡奥斯智能交互引擎是卡奥斯基于海尔近40年工业生产经验积累和卡奥斯7年工业互联网平台建设的最佳实践,基于大语言模型和RAG技术,集合海量工业领域生态资源方优质产品和知识服务,旨在通过智能搜索、连续交互,实时生成个性化的内容…...
Java多线程编程实践中的常见问题与解决方案
Java多线程编程实践中的常见问题与解决方案 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! **1. **引言 Java多线程编程是现代软件开发中不可或缺的一部分&a…...
WebStorm配置路径别名(jsconfig.json)
项目是 ViteVueTs 新建一个 jsconfig.json文件 {"compilerOptions": {"baseUrl": ".","paths": {"/*": ["./src/*"]}},"exclude": ["node_modules", "dist"] }然后在 vite.confi…...
[吃瓜教程]南瓜书第4章决策树
1.决策树的算法原理 从逻辑角度,条件判断语句的组合;从几何角度,根据某种准则划分特征空间; 是一种分治的思想,其最终目的是将样本约分约纯,而划分的核心是在条件的选择或者说是**特征空间的划分标准 ** …...
Redis 面试题完整指南:深度解析基础、进阶与高级功能
基础知识 1. 什么是Redis? Redis(Remote Dictionary Server)是一个开源的、基于内存的数据结构存储系统,既可以用作数据库、缓存,也可以用作消息中间件。它支持多种数据结构,如字符串、哈希、列表、集合、…...
spring 枚举、策略模式、InitializingBean初使化组合使用示例
实现一个简单的文本处理系统。 在这个系统中,我们将定义不同类型的文本处理策略,比如大小写转换、添加前缀后缀等,并使用工厂模式来管理这些策略。 1 定义一个枚举来标识不同的文本处理类型 public enum TextProcessTypeEnum {UPPER_CASE,LO…...
嵌入式学习——硬件(IIC、ADC)——day56
1. IIC 1.1 定义(同步串行半双工通信总线) IIC(Inter-Integrated Circuit)又称I2C,是是IICBus简称,所以中文应该叫集成电路总线。是飞利浦公司在1980年代为了让主板、嵌入式系统或手机用以连接低速周边设备…...
vCenter VXR01405C ALARM Certificate is about to expire
vCenter VXR01405C ALARM Certificate is about to expire 需要更新证书 步骤如下 ===vCenter=== root@vc [ ~ ]# for i in $(/usr/lib/vmware-vmafd/bin/vecs-cli store list); do echo STORE $i; sudo /usr/lib/vmware-vmafd/b STORE MACHINE_SSL_CERT Alias : __MACHINE…...
安装和微调大模型(基于LLaMA-Factory)
打开终端(在Unix或macOS上)或命令提示符/Anaconda Prompt(在Windows上)。 创建一个名为lora的虚拟环境并指定Python版本为3.9。 https://github.com/echonoshy/cgft-llm/blob/master/llama-factory/README.mdGitHub - hiyouga/…...
使用docker搭建squid和ss5
docker run -d --name squid-container -e TZAsia/Shanghai -p 自定义端口并记得开放:3128 ubuntu/squid docker exec -it squid-container /bin/bash apt update && apt install vim # 修改 http_port 3128 为 http_port 0.0.0.0:3128 # 修改 http_access deny all 为…...
大数据面试题之Flink(1)
目录 Flink架构 Flink的窗口了解哪些,都有什么区别,有哪几种?如何定义? Flink窗口函数,时间语义相关的问题 介绍下Flink的watermark(水位线),watermark需要实现哪个实现类,在何处定义?有什么作用? Flink的…...
策略模式、工厂模式和模板模式的应用
1、策略模式、工厂模式解决if else Cal package com.example.dyc.cal;import org.springframework.beans.factory.InitializingBean;public interface Cal extends InitializingBean {public Integer cal(Integer a, Integer b); }Cal工厂 package com.example.dyc.cal;impo…...
在postman中调试supabase的API接口
文章目录 在supabase中获取API地址和key知道它的restfull风格在postman中进行的设置1、get请求调试2、post新增用户调试3、使用patch更新数据,不用put!4、delete删除数据 总结 在supabase中获取API地址和key 首先登录dashboard后台,首页- 右…...
微信小程序毕业设计-英语互助系统项目开发实战(附源码+论文)
大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:微信小程序毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计…...
【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第49课-机器人自动跳舞
【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第49课-机器人自动跳舞 使用dtns.network德塔世界(开源的智体世界引擎),策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎…...
【LLM教程-llama】如何Fine Tuning大语言模型?
今天给大家带来了一篇超级详细的教程,手把手教你如何对大语言模型进行微调(Fine Tuning)!(代码和详细解释放在后文) 目录 大语言模型进行微调(Fine Tuning)需要哪些步骤? 大语言模型进行微调(Fine Tuning)训练过程及代码 大语言…...
PHP 比 Java 的开发效率高在哪?
在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「JAVA的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!!做了几年PHP,最近…...
高德定位获取详细位置失败的处理方法
在使用高德地图定位功能获取位置信息有时候会获取详细位置失败,但是经纬度是有的,这种情况下怎么处理呢,可以使用逆地理编码通过返回的经纬度来再次获取位置信息,如果再次失败那么获取详细位置信息就失败了。 具体工具类如下: package com.demo.map.utils;import androi…...
PX2平台Pytorch源码编译
写在前面:以下内容完成于2019年底,只是把笔记放到了CSDN上。 需要注释掉NCLL及分布式相关的配置 libcudart.patch diff --git a/torch/cuda/__init__.py b/torch/cuda/__init__.py index 4591702..07e1268 100644 --- a/torch/cuda/__init__.pyb/torc…...
昇思25天学习打卡营第6天|简单的深度学习模型实战 - 函数式自动微分
自动微分(Automatic Differentiation)是什么?微分是函数在某一处的导数值,自动微分就是使用计算机程序自动求解函数在某一处的导数值。自动微分可用于计算神经网络反向传播的梯度大小,是机器学习训练中不可或缺的一步。 这些公式难免让人头大…...
基于Linux的云端垃圾分类助手
项目简介 本项目旨在开发一个基于嵌入式系统的智能垃圾分类装置。该装置能够通过串口通信、语音播报、网络通信等多种方式,实现垃圾的自动识别和分类投放。系统采用多线程设计,确保各功能模块高效并行工作。 项目功能 垃圾分类识别 系统使用摄像头拍摄…...
【PYG】Planetoid中边存储的格式,为什么打印前十条边用edge_index[:, :10]
edge_index 是 PyTorch Geometric 中常用的表示图边的张量。它通常是一个形状为 [2, num_edges] 的二维张量,其中 num_edges 表示图中边的数量。每一列表示一条边,包含两个节点的索引。 实际上这是COO存储格式,官方文档里也有写,…...
【知识图谱系列】(实例)python操作neo4j构建企业间的业务往来的知识图谱
本章节通过聚焦于"金额"这一核心属性,构建了一幅知识图谱,旨在揭示"销售方"与"购买方"间的商业互动网。在这张图谱中,绿色节点象征着购买方,而红色节点则代表了销售方。这两类节点间的紧密连线&…...
解决MySQL删除/var/lib/mysql下的所有文件后无法启动的问题
解决MySQL删除/var/lib/mysql下的所有文件后无法启动的问题 确保清空/var/lib/mysql初始化启动mysql参考 确保清空/var/lib/mysql rm-rf /var/lib/mysql/* 初始化 mysql_install_db --usermysql --basedir/usr --datadir/var/lib/mysql 其中的mysql用户不要改成root。否则会…...
探索WebKit的Flexbox奇境:CSS Flexbox支持全解析
探索WebKit的Flexbox奇境:CSS Flexbox支持全解析 在现代网页设计中,响应式布局的需求日益增长,CSS Flexbox作为布局模式的一个突破性进展,提供了一种更加高效和灵活的方式来设计复杂的用户界面。WebKit,作为众多流行浏…...
Unity--协程--Coroutine
Unity–协程–Coroutine 1. 协程的基本概念 基本概念:不是线程,将代码按照划分的时间来执行,这个时间可以是具体的多少秒,也可以是物理帧的时间,也可以是一帧的绘制结束的时间。 协程的写法:通过返回IEnumerator的函数实现,使用yield return语句暂停执…...
详解COB显示屏的技术特点
COB(Chip on Board)显示屏作为一种采用倒装COB封装技术的LED显示屏,在显示效果以及使用稳定性跟防护性方面,拥有更大优势,今天跟随COB显示屏厂家中品瑞科技一起来看看,COB显示屏的技术特点: 1、…...
富唯智能推出的AMR复合机器人铝板CNC上下料方案
随着科技的不断进步,CNC加工行业正面临着前所未有的变革。传统的CNC上下料方式已无法满足现代生产对效率、精度和安全性的高要求。在这样的背景下,富唯智能推出的AMR复合机器人铝板CNC上下料方案,以其智能化、自动化的特点,引领了…...
springcloud-config服务器,同样的配置在linux环境下不生效
原本在windows下能争取的获取远程配置但是部署到linux上死活都没有内容,然后开始了远程调试,这里顺带讲解下获取配置文件如果使用的是Git源,config service是如何响应接口并返回配置信息的。先说问题,我的服务名原本是abc-abc-abc…...
写代码,为什么还需要作图?
引言 古人云 :一图胜千言,闲人说:无图无真相。 在日常的聊天工具当中,无论是使用微信,还是钉钉。使用图片或表情包的频次越来越高,那是为什么呢?其实在互联网没有那么发达的时候,我…...
一句话介绍什么是AI智能体?
什么是AI智能体? 一句话说就是利用各种AI的功能的api组合,完成你想要的结果。 例如你希望完成一个关于主题为啤酒主题的小红书文案图片,那么它就可以完成 前面几个步骤类似automa的组件,最后生成一个结果。...
32.哀家要长脑子了!
1.299. 猜数字游戏 - 力扣(LeetCode) 公牛还是挺好数的,奶牛。。。妈呀,一朝打回解放前 抓本质抓本质,有多少位非公牛数可以通过重新排列转换公牛数字,意思就是,当这个数不是公牛数字时&#x…...
Vue2 - 项目上线后生产环境中去除console.log的输出以及断点的解决方案
前言 当你准备将Vue.js应用程序部署到生产环境时,一个关键的优化步骤是移除代码中的所有 console.log 语句以及断点。在开发阶段,console.log 是一个非常有用的调试工具,但在生产环境中保留它们可能会影响性能和安全性。在本文中,我将向你展示如何通过使用Vue CLI 2来自动…...
phpword生成PDF
接上一篇phpword生成word文档,如有不明白的问题可以先查看上一篇文章 首先,生成PDF需要先生成word文档,而后通过word文档生成HTML文档,最后才可以通过HTML文档生成PDF文件,详细代码如下。 执行命令安装phpword&#…...
AI在软件开发中的角色:助手还是取代者?
目录 前言 一、AI工具现状:高效助手的崛起 二、AI对开发者的影响:新技能与竞争力的重塑 三、AI开发的未来:共生而非取代 写在最后 前言 随着科技的飞速发展,生成式人工智能(AIGC)在软件开发领域的应用日…...
第15周:RNN心脏病预测
目录 前言 二、前期准备 2.1 设置GPU 2.2 导入数据 2.2.1 数据介绍 2.2.2 导入代码 2.2.3 检查数据 三、数据预处理 3.1 划分训练集与测试集 3.2 标准化 四、构建RNN模型 4.1 基本概念 4.2 搭建代码 五、编译模型 六、训练模型 七、模型评估 总结 前言 &#…...
Linux之文本三剑客
Linux之三剑客 Linux的三个命令,主要是用来处理文本,grep,sed,awk,处理日志的时候使用的非常多 1 grep 对文本的内容进行查找 1) 基础用法 语法 grep 选项 内容|正则表达式 文件选项: -i 不区分大小写 -v 排除,反选 -n 显示行号 -c 统计个数查看文件里包含有的内容 [roo…...
关于vue3的一些前端面试题
1.ref() 响应式对象顶级响应式对象,可以在模板中直接使用不用添加 .value,可以直接使用ref() 对像更新,Vue会自动检测更新,然后更新Dom深层次的对象也可以是响应式,也会被追踪shallowRef() 是ref的浅层次表现,深层次的…...
FPGA问题
fpga 问题 ep2c5t144 开发板 安装quatus ii 先择版本 13.0 带有 cyclon I ii iii 等 而不是15,不带cyclone ii 库 Quartus II 13.0 添加器件库教程(包含下载地址)_quartus ii 怎么添加芯片-CSDN博客 modelsim 仿真 可以使用下面的(不需安装quartus 1…...
电脑录制视频的软件,电脑录制,4款免费软件推荐
在数字化时代,电脑录制视频的软件已成为我们日常生活和工作中的得力助手,这些软件可以帮助我们轻松捕获到屏幕上的精彩瞬间。但同时市面上的录制视频软件也层出不穷,让人不知该如何选择。到底怎样才能选择到一款适合自己的录屏软件呢…...
滔搏与FanaticsChina宣布开启合作进程,发力大中华区体育IP市
记者从总部位于上海的中国最大运动零售运营商滔搏获悉,其与全球领先的授权体育用品数字化平台Fanatics开启合作,共同拓展Fanatics旗下特许体育IP在大中华区的商业化运营。Fanatics除了与众多风靡全球的体育IP有着深度的合作伙伴关系外,也拥有知名的运动品牌与零售品牌,其业…...
服务器感染了. rmallox勒索病毒,如何确保数据文件完整恢复?
导言: 近年来,随着信息技术的飞速发展,网络安全问题日益凸显。其中,勒索病毒作为一种严重的网络威胁,对个人和企业数据造成了巨大的威胁。本文将重点介绍.rmallox勒索病毒的特点、传播途径以及应对策略,旨…...
C++STL容器系列(三)list的详细用法和底层实现
目录 一:介绍二:list的创建和方法创建list方法 三:list的具体用法3.1 push_back、pop_back、push_front、pop_front3.2 insert() 和 erase()3.3 splice 函数 四:list容器底层实现4.1 list 容器节点结构5.2 list容器迭代器的底层实…...
FPGA——eMMC验证
一.FPGA基础 1.FPGA烧录流程 (1) 加载流文件 —— bitfile (2) 烧录文件 —— cmm 二.MMC 1.基础知识 (1)jz4740、mmc、emmc、sd之间的关系? jz4740——处理器 mmc——存储卡标准 emmc——mmc基础上发展的高效存储解决方案 sd—— 三.eMMC和SD case验证 1.ca…...
JavaScrip原型对象
参考 JavaScrip原型对象 | LogDicthttps://www.logdict.com/archives/javascripyuan-xing-mo-shi...
Vue进阶之Vue项目实战(四)
Vue项目实战 出码功能知识介绍渲染器性能调优使用 vue devtools 进行分析使用“渲染”进行分析判断打包构建的产物是否符合预期安装插件使用位置使用过程使用lighthouse分析页面加载情况使用performance分析页面加载情况应用自动化部署与发布CI/CD常见的CI/CD服务出码功能 出码…...