前端基础之《Vue（13）—重要API》
重要的API
一、nextTick()
1、写法 Vue.$nextTick()或者this.$nextTick()
原因：
set操作代码是同步的，但是代码背后的行为是异步的。set操作修改声明式变量，触发re-render生成新的虚拟DOM，进一步执行diff运算，找到脏节点集合，交给Vue背后的更新队列去执行循环更新。
什么是nextTick？
在更新队列中每一个更新任务都是一个更新单元，nextTick表示下一个更新单元（更新周期）。
例子1：
代码是同步的，任务是异步的，打印出来肯定不是3
<html>
<head><title>重要的API</title><style></style>
</head>
<body><div id="app"><h1 v-text="num" id="bb"></h1><button @click="add">自增</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({data() {return {num: 1}},methods: {add() {this.num++this.num++// 获取节点文本const tt = document.getElementById('bb').innerTextconsole.log("---tt", tt)}}})app.$mount('#app')</script></body>
</html>
页面显示3：
但是控制台打印1：
例子2：
用nextTick修改成同步的
<html>
<head><title>重要的API</title><style></style>
</head>
<body><div id="app"><h1 v-text="num" id="bb"></h1><button @click="add">自增</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({data() {return {num: 1}},methods: {add() {this.num++this.num++// 获取节点文本this.$nextTick(()=>{const tt = document.getElementById('bb').innerTextconsole.log("---tt", tt)})}}})app.$mount('#app')</script></body>
</html>
2、nextTick的作用
当我们set操作data（更新DOM），你希望访问这个DOM的最新状态，使用nextTick。（操作完DOM后，马上对它做操作）
3、面试题
this.num++或者this改变声明式变量是同步还是异步的？
代码是同步，但是背后有虚拟DOM生成，有递归运算，有更新队列是异步的。
4、nextTick()在某种程度（场景）下，可以使用updated()来替代
二、forceUpdate()
1、写法 this.$forceUpdate()
原因：
Vue响应式是有缺陷的。在复杂的Vue应用中，有些复杂的引用数据类型，当你set操作这些复杂的引用数据类型时，视图不更新。
解决方案：
当你set操作完成后，立即调用this.$forceUpdate()强制更新。（强制re-render）
有时候，this.$forceUpdate()也无法解决上述问题，对set操作的变量进行一次深复制。
相关文章：
前端基础之《Vue（13）—重要API》
重要的API 一、nextTick() 1、写法 Vue.$nextTick()或者this.$nextTick() 原因： set操作代码是同步的，但是代码背后的行为是异步的。set操作修改声明式变量，触发re-render生成新的虚拟DOM，进一步执行diff运算，找到…...
Python爬虫实战：获取彼岸网高清素材图片
一、引言 在数字化时代，图片素材的需求持续增长。彼岸网提供了丰富的高质量图片资源，其中 4K 风景图片备受用户青睐。借助 Python 爬虫技术，可自动化地从彼岸网获取这些图片，为用户提供便捷的图片素材服务。然而，爬取过程中会遭遇登录验证、反爬机制等问题，需采用相应技…...
拥抱 Kotlin Flow
1. 引言 Kotlin Flow 是 Kotlin 协程生态中处理异步数据流的核心工具，它提供了一种声明式、轻量级且与协程深度集成的响应式编程模型。与传统的 RxJava 相比，Flow 更简洁、更易于维护，尤其在 Android 开发中已成为主流选择。本文将从基础概念…...
winget使用
Get-Command winget winget search qq winget install Tencent.QQ.NT...
C++从入门到实战（十一）详细讲解C/C++语言中内存分布与C与C++内存管理对比
C从入门到实战（十一）详细讲解C/C语言中内存分布与C与C内存管理对比 前言一、C/C语言中内存分布1.内核空间2.栈3.堆4.数据段5.代码段 二、例题带练巩固C/C语言中内存分布的知识题目讲解题目答案 三、C语言动态内存分配（知识回顾）3.…...
flutter 专题 一百零四 Flutter环境搭建
Flutter简介 Flutter 是Google开发的一个移动跨平台（Android 和 iOS）的开发框架，使用的是 Dart 语言。和 React Native 不同的是，Flutter 框架并不是一个严格意义上的原生应用开发框架。Flutter 的目标是用来创建高性能、高稳定性…...
傅里叶与相位偏移
一、简介 大三的《离散数学》。。。。。 傅里叶变换是数学与工程领域的一项革命性工具，其核心思想是将复杂信号分解为简单正弦波的叠加，实现从时域（时间维度）到频域（频率维度）的转换。通过这种变换&#x…...
Godot笔记：入门索引
文章目录 前言游戏引擎软件界面关键概念GDScript导出成品创建非游戏应用后记 前言 最近对游戏引擎这块感兴趣，特别是因为游戏引擎自带的很多工具，作为图形化软件的开发应该也不错。 Godot 是一款这几年比较流行的开源游戏引擎。这里记录下入门学习使用 …...
OpenCV实战教程 第一部分：基础入门
第一部分：基础入门 1. OpenCV简介 什么是OpenCV及其应用领域 OpenCV（Open Source Computer Vision Library）是一个开源的计算机视觉和机器学习软件库，于1999年由Intel公司发起，现在由非营利组织OpenCV.org维护。Ope…...
)
OpenCV 图像处理核心技术 (第二部分)
欢迎来到 OpenCV 图像处理的第二部分！在第一部分，我们学习了如何加载、显示、保存图像以及访问像素等基础知识。现在，我们将深入探索如何利用 OpenCV 提供的强大工具来修改和分析图像。 图像处理是计算机视觉领域的基石。通过对图像进行各种…...
Git从入门到精通-第二章-工具配置
目录 命令行 安装Git 初次运行Git前的配置 git config基本概念 常用命令 配置用户信息 配置文本编辑器 查看配置 配置别名（简化命令） 高级配置 换行符处理（方便跨平台协作） 忽略文件权限变更（常用于团队协…...
树状结构转换工具类
项目中使用了很多树状结构，为了方便使用开发一个通用的工具类。 使用工具类的时候写一个类基础BaseNode，如果有个性化字段添加到类里面，然后就可以套用工具类。 工具类会将id和pid做关联返回一个树状结构的集合。 使用了hutool的工具包判空…...
C#基础简述
C#基础详解 一、C#语言概述 C#（读作"C Sharp"）是微软开发的面向对象的编程语言，运行在.NET平台上。它结合了C的强大功能和Visual Basic的简单性，具有以下特点： 面向对象：支持封装、继…...
AI赋能烟草工艺革命：虫情监测步入智能化时代
在当今竞争激烈且品质至上的烟草行业中，生产流程的每一个细微环节都关乎着企业的生死存亡与品牌的兴衰荣辱。烟草工艺部门与制丝、卷包车间作为生产链条的核心驱动，犹如精密仪器中的关键齿轮，彼此紧密咬合、协同运转，任何一处的小…...
小刚说C语言刷题—1462小明的游泳时间
1.题目描述 伦敦奥运会要到了，小明在拼命练习游泳准备参加游泳比赛。 这一天，小明给自己的游泳时间做了精确的计时（本题中的计时都按 24 小时制计算），它发现自己从 a 时 b 分一直游泳到当天的 c 时 d 分。 请你帮小…...
StarRocks Lakehouse 如何重构大数据架构？
随着数据分析需求的不断演进，企业对数据处理架构的期望也在不断提升。在这一背景下，StarRocks 凭借其高性能的实时分析能力，正引领数据分析进入湖仓一体的新时代。 4 月 18 日，镜舟科技高级技术专家单菁茹做客开源中国直播栏目《…...
用TCP实现服务器与客户端的交互
引言： 这篇文章主要是用TCP构造的回显服务器，也就是客户端发什么，就返回什么。用实现这个过程方式来学会TCP套接字的使用。 一、TCP的特点 TCP是可靠的：这个需要去了解TCP的机制，这是一个大工程，博主后面写…...
用于实时辐射场渲染的3D高斯溅射——3D Gaussian Splatting for Real-Time Radiance Field Rendering
用于实时辐射场渲染的3D高斯溅射——3D Gaussian Splatting for Real-Time Radiance Field Rendering 文章目录 用于实时辐射场渲染的3D高斯溅射——3D Gaussian Splatting for Real-Time Radiance Field Rendering摘要Abstract1. 预备知识1.1 三维的几何表示1.2 计算机中的集合…...
Vue3 Echarts 3D立方体柱状图实现教程
文章目录 前言一、实现原理二、series ——type: "pictorialBar" 简介2.1 常用属性 三、代码实战3.1 封装一个echarts通用组件 echarts.vue3.2 实现一个立方体柱状图（1）首先实现一个基础柱状图（2）添加立方体棱线&#x…...
Soildworks怎样在装配体中建立局部剖视图
1思路：建立拉伸切除 2步骤 1-打开点线面显示按钮 2-在装配体中依据某个基准面（例如前视基准面）建立一个待切除的草图 3-点击顶部工具栏的装配体--->装嫩配体特征---->拉伸切除---Ok 3具体图示 1-点击，使其变成灰色 即…...
基于C++的IOT网关和平台5：github项目ctGateway开发指南
初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C++的，可以在任何平台上使用。 源码指引：github源码指引_初级代码游戏的博客-CSDN博客 …...
虚拟机centos7安装docker
虚拟机CentOS 7上安装 Docker流程 1. 更新系统软件包 需要确保系统软件包是最新的 sudo yum -y update sudo：以超级用户权限执行命令。 yum：CentOS的包管理器工具。 -y：自动确认所有提示，直接执行。 2. 安装 Docker 依赖 在安装 …...
11.Spring Boot 3.1.5 中使用 SpringDoc OpenAPI（替代 Swagger）生成 API 文档
Spring Boot 3.1.5 中使用 SpringDoc OpenAPI（替代 Swagger）生成 API 文档 1. 项目结构 假设项目名为 springboot-openapi-demo，以下是项目的基本结构： springboot-openapi-demo/ ├── src/ │ ├── main/ │ │ ├─…...
pytorch对应gpu版本是否可用判断逻辑
# gpu_is_ok.py import torchdef check_torch_gpu():# 打印PyTorch版本print(f"PyTorch version: {torch.__version__}")# 检查CUDA是否可用cuda_available torch.cuda.is_available()print(f"CUDA available: {cuda_available}")if cuda_available:# 打印…...
Kubernetes 集群概念详解
Kubernetes 集群概念详解 Kubernetes 集群是由多个计算节点组成的容器编排系统，用于自动化部署、扩展和管理容器化应用。以下是 Kubernetes 集群的核心概念和架构解析： 一、集群基础架构 1. 集群组成要素 graph TBMaster[控制平面] --> Node1[工作…...
BT137-ASEMI机器人功率器件专用BT137
编辑：LL BT137-ASEMI机器人功率器件专用BT137 型号：BT137 品牌：ASEMI 封装：TO-220F 批号：最新 引脚数量：3 封装尺寸：如图 特性：双向可控硅 工作结温：-40℃~150℃…...
ArcGIS+GPT：多领域地理分析与决策新方案
技术点目录 AI大模型应用ArcGIS工作流程及功能prompt的使用技巧AI助力工作流程AI助力数据读取AI助力数据编辑与处理AI助力空间分析AI助力遥感分析AI助力二次开发AI助力科研绘图ArcGISAI综合应用了解更多 ——————————————————————————————————…...
和鸿蒙arktsrequest.uploadFile)
鸿蒙文件上传-从前端到后端详解，对比jq请求和鸿蒙arkts请求区别，对比new FormData()和鸿蒙arktsrequest.uploadFile
需要权限：ohos.permission.INTERNET 1.nodejs自定义书写上传后端接口 传输过来的数据放在files?.image下 router.post(/upload,(req, res) > {var form new multiparty.Form();form.uploadDirpublic/images/uploads; //上传图片保存的地址(目录必须存在)fo…...
【DBeaver】如何连接MongoDB
MongoDB驱动 在 DBeaver 社区版是没有的，得自己下载 一、下载mongo-jdbc-standalone.jar 二、在工具栏找到数据库，选择驱动管理器 三、在驱动管理器点击新建 四、选择库，添加mongo-jdbc-standalone.jar;然后点击找到类 五、选择设置&#x…...
Unity 粒子同步，FishNet
Github的工程 同步画面 使用FishNet插件同步，可使用这个选项来克隆第二个项目进行测试...
自然语言处理之命名实体识别：Bi-LSTM-CRF模型的评估与性能分析
命名实体识别（Named Entity Recognition, NER）是自然语言处理（NLP）的核心任务之一，旨在从文本中识别出具有特定意义的实体（如人名、地名、机构名等），并为其分类。随着深度学习的发展，**Bi-LSTM-CRF**（双向长短期记忆网络结合条件随机场）模型因其强大的序列建模能力成…...
【SpringBoot】基于mybatisPlus的博客系统
1.实现用户登录 在之前的项目登录中，我使用的是Session传递用户信息实现校验登录 现在学习了Jwt令牌技术后我尝试用Jwt来完成校验工作 Jwt令牌 令牌一词在网络编程一节我就有所耳闻，现在又拾了起来。 这里讲应用：令牌也就用于身份标识&a…...
[Android]任务列表中有两个相机图标
现象： 修改AndroidManifest.xml <activityandroid:name"com.android.camera.PermissionsActivity"android:label"string/app_name"android:launchMode"singleTop"android:configChanges"orientation|screenSize|keyboardH…...
VINS-FUSION：配置参数说明与配置自己的参数
文章目录 📚简介📍配置文件说明📷相机配置参数🔧设备参数🎯配置自己的参数📷相机参数🔧设备参数📚简介 VINS-Fusion 是一个基于优化的多传感器状态估计器，实现了视觉惯性里程计(VIO)和视觉惯性全球导航卫星系统(VI-GNSS)融合。 📍配置文件说明 VINS-Fus…...
Polars: 新一代高性能数据处理库
<------最重要的是订阅“鲁班模锤”------> 在数据科学和数据分析领域，性能和效率一直是从业者关注的焦点。随着数据量的爆炸式增长，传统的数据处理工具如pandas在处理大规模数据时逐渐显露出其局限性。在这样的背景下，一个名为Polars…...
大屏/门户页面兼容各种分辨率或电脑缩放
需求要求: 需要支持缩放功能(缩放后 页面各元素模块正常展示)、 需要适配各种分辨率(初始加载不应出现横向滚动条) 选择的实现方案 利用 zoom 或者 transform 来缩放兼容页面样式，不动业务模块代码 const isMobile /iPhone|iPad|iPod|Android|Harmony/i.test(navi…...
自定义项目中导入文件import顺序
项目中import 顺序 分类顺序 可以根据模块或文件的功能、类型等进行分类，比如将所有的组件放在一起、工具函数放在一起等。这样的组织方式更有利于对项目结构和代码逻辑的理解，当需要查找某一类功能的代码时，可以快速定位到相应的 import 区…...
Git 本地提交撤销
引言 在 Git 版本控制系统中，偶尔会遇到需要撤销本地提交的情况。本文将详细介绍如何优雅地处理这种情况，帮助您在不慌乱的情况下恢复错误提交。 撤销本地提交的主要方法 当您意外提交了错误文件到 Git 仓库，但尚未推送到远程服务器时&…...
k8s术语之Replication Controller
Replication Controller 在kubernetes中简称RC,它其实是定义了一个期望的场景，即声明某种Pod的副本数量在任意时刻都符合某个预期值，包括一下几个值： 1.Pod期待的副本数（replicas) 2.用于筛选目标Pod的Lable Selector 3.当…...
AI驱动视频批量智能混剪软件生产技术实践
一、引言：短视频工业化生产的技术革新 在电商带货、知识分享等领域，高效产出差异化视频内容成为核心竞争力。本文结合AI技术与工程实践，解析如何通过智能素材处理、参数化合成引擎、多维度质量控制构建全自动视频生产流水线，实现…...
SPL 量化 回测
回测是一种评估交易策略的通用方法。它通过计算策略在历史数据上的表现来评估交易策略的可行性。如果回测结果良好，交易者和分析师可能会有信心在未来继续使用该策略。 1. 回测脚本 首先要编写回测脚本，将回测脚本保存为 backtest.splx。 脚本代码如下…...
2025年“深圳杯”数学建模挑战赛A题-芯片热弹性物理参数估计
芯片热弹性物理参数估计 小驴数模 当今时代，芯片无疑是现代社会发展的 “核心引擎”。它深度嵌入智能手机，实现全球即时通讯；助力汽车智能驾驶，精准导航、自动操控；赋能工业自动化生产线，高效运转。但随着…...
前端笔记-Element-Plus
结束了vue的基础学习，现在进一步学习组件 Element-Plus部分学习目标： Element Plus1、查阅官方文档指南2、学习常用组件的使用方法3、Table、Pagination、Form4、Input、Input Number、Switch、Select、Date Picker、Button5、Message、MessageBox、N…...
vue3封装全局方法
场景：各个模块详情中存在附件列表数据，需要再每个中添加一个预览附件的方法，是后期提出的需求，所以要在每个模块中进行添加，就去将预览方法封装一下。 将公共方法封装在utils下 utils/filePreview.ts import router…...
Django 学习指南：从入门到精通（大体流程）
想要快速掌握 Django 开发技能吗？按照以下学习流程，带你从零基础成长为独立开发 Web 应用的高手。 一、准备工作：打下坚实基础 在开启 Django 之旅前，先确保你已掌握以下 Python 基础知识： 数据类型：熟悉数…...
Java对集合进行操作，赋值新字段
1、方法一：增强for循环 List<Refund> list refundService.selectRefundList(queryParam); for (Refund refund : list) {refund.setPayWay(refund.getPaymentMethod()); // 将支付方式赋值给付款方式 }在 Java 中，当你使用 for 循环遍历 List<…...
【网工第6版】第6章 网络安全③
目录 ■ 虚拟专用网VPN ◆虚拟专用网基础 ◆VPN分类 ▲根据应用场景不同分类 ▲根据VPN技术实现的网络层次分类 ◎ 二层隧道协议：L2TP和PPTP ◎ 网络层隧道协议：IPSec和GRE ※ IPSec IPSec基础 IPSec原理 IPSec两种封装模式 ※ GRE ■ 应用…...
20250430在ubuntu14.04.6系统上查看系统实时网速
rootrootubuntu:~$ sudo apt-get install iftop 【不需要root权限】 rootrootubuntu:~$ sudo apt-get install nload rootrootubuntu:~$ sudo apt-get install vnstat 【失败】 rootrootubuntu:~$ sudo apt-get install speedtest-cli rootrootubuntu:~$ sudo apt-get install …...
远程 Debugger 多用户环境下的用户隔离实践
远程 Debugger 多用户环境下的用户隔离实践 在现代分布式开发和云原生环境下，远程 Debugger 的应用愈发普遍。然而，随着多人协作和多租户场景的出现，**远程 Debugger 的“用户隔离”**变得至关重要。只有实现了良好的用户隔离，才…...
Neo4j多关系或多路径
目录 一、双向关系 1.创建2个节点间的双向关系 2.创建多个路径的节点，双向关系 3.查询带有方向性的关系 4.查询路径上的多个关系 5.查询出a到b的最短距离 6.查询特定长度的路径 二、将之前的关系清空下，如图所示，在操作一次 1.查询出…...