第七节——Vue中定义组件状态驱动视图

一、概念

存放当前组件状态的地方,组件所有的状态数据都可以放到data里面存储,在data里定义的数据具备响应式。在组件中data只能是函数。

二、修改data驱动视图

完成点击按钮 num +1功能

<template><div>{{ num }}<button @click="handle">+1</button></div>
</template><script>
export default {data() {return {num: 1,};},methods: {handle() {// 可以直接使用this拿到当前组件的状态并修改,视图会自动重新渲染😄this.num += 1;},},
};
</script>

三、数据修改是同步的还是异步的

1、思考以下代码会打印出什么内容

同步更新数据,异步更新dom

<template><div><button id="btn" @click="handle">{{ num }}</button></div>
</template><script>
export default {data() {return {num: 1,};},methods: {handle() {this.num += 1console.log("num的值", this.num)console.log("按钮里的数据", document.getElementById('btn').innerHTML)},},
};
</script>

2、nextTick

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

<template><div><button id="btn" @click="handle">{{ num }}</button></div>
</template><script>
export default {data() {return {num: 1,};},methods: {async handle() {this.num += 1console.log("num的值", this.num)await this.$nextTick()console.log("按钮里的数据", document.getElementById('btn').innerHTML)},},
};
</script>

3、原理

Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。

当你设置 vm(this).someData = 'new value',DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用

4、使用场景

1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中

四、data为什么是一个函数

在Vue组件中,data选项必须是一个函数,而不能直接是一个对象。 这是因为Vue组件可以同时存在多个实例,如果直接使用对象形式的data选项,那么所有的实例将会共享同一个data对象,这样就会造成数据互相干扰的问题。 因此,将data选项设置为函数可以让每个实例都拥有自己独立的data对象

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/119957.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Prompt设计与大语言模型微调

本文主要介绍了Prompt设计、大语言模型SFT和LLM在手机天猫AI导购助理项目应用。 ChatGPT基本原理 “会说话的AI”&#xff0c;“智能体” 简单概括成以下几个步骤&#xff1a; 预处理文本&#xff1a;ChatGPT的输入文本需要进行预处理。输入编码&#xff1a;ChatGPT将经过预处理…

Java实现SQL分页

在日常开发需要对数据进行分页&#xff0c;配置如下 <!-- baomidou --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.0</version></dependency> 在控…

C++求欧拉角(eigen库中暴露的一些问题)

不同顺序欧拉角转旋转矩阵对照公式 eigen库求欧拉角公式 分别试验eigen库自带的matrix.eulerAngles()函数&#xff0c;与根据上述公式推导的两种方法求欧拉角 eigen库求得欧拉角的范围一定是 x − > r o l l x->roll x−>roll方向在 [ 0 , π ] [0,π] [0,π]之间&am…

面试经典150题——Day22

文章目录 一、题目二、题解 一、题目 6. Zigzag Conversion The string “PAYPALISHIRING” is written in a zigzag pattern on a given number of rows like this: (you may want to display this pattern in a fixed font for better legibility) P A H N A P L S I I G …

HarmonyOS 音频通话开发指导

常用的音频通话模式包括 VOIP 通话和蜂窝通话。 ● VOIP 通话&#xff1a;VOIP&#xff08;Voice over Internet Protocol&#xff09;通话是指基于互联网协议&#xff08;IP&#xff09;进行通讯的一种语音通话技术。VOIP 通话会将通话信息打包成数据包&#xff0c;通过网络进…

【算法题】割后面积最大的蛋糕

题目&#xff1a; 矩形蛋糕的高度为 h 且宽度为 w&#xff0c;给你两个整数数组 horizontalCuts 和 verticalCuts&#xff0c;其中&#xff1a; horizontalCuts[i] 是从矩形蛋糕顶部到第 i 个水平切口的距离 verticalCuts[j] 是从矩形蛋糕的左侧到第 j 个竖直切口的距离 请你…

TypeScript中的declare关键字

declare关键字 1. 简介 declare关键字用来告诉编译器&#xff0c;某个类型是存在的&#xff0c;可以在当前文件中使用。 作用&#xff1a;就是让当前文件可以使用其他文件声明的类型。比如&#xff0c;自己的脚本使用外部库定义的函数&#xff0c;编译器会因为不知道外部函数…

tinymce输入框怎么限制只输入空格或者回车时不能提交

项目场景&#xff1a; 项目相关背景&#xff1a; tinymce输入框只输入空格或者回车时提交的空数据毫无意义&#xff0c;所以需要限制一下 无意义的输入&#xff1a; 解决方案&#xff1a; 因为tinymce输入框传到后端的数据是代码形式&#xff0c;所以不能直接.trem&#…

Linux find 文件目录搜索工具

目录 前言 基本用法 查找文件通配符匹配 查找文件并打印到标准输出 查找文件并删除 根据文件大小查找 根据文件修改时间查找 查找空文件或目录 查找文件类型 前言 find是一个在Linux系统中非常强大和灵活的文件搜索工具。它用于在文件系统中查找文件和目录&#xff0…

各类统计模型R语言的详细使用教程-R语言的线性回归使用教程

各类统计模型R语言的详细使用教程-R语言的线性回归使用教程 前言R语言的线性回归代码示例回归诊断误差项正态qq图内学生化残差外学生化残差线性关系异常值的发现、处理帽子矩阵的方法DFFITS 准则Cook统计量COVRATIO准则多重共线性summaryKlein判别法特征根法条件指数法方差膨胀…

测试用例的设计方法(全):等价类划分方法

一.方法简介 1.定义 是把所有可能的输入数据,即程序的输入域划分成若干部分&#xff08;子集&#xff09;,然后从每一个子集中选取少数具有代表性的数据作为测试用例。该方法是一种重要的,常用的黑盒测试用例设计方法。 2.划分等价类&#xff1a; 等价类是指某个输入域的…

给新手程序员的建议

专注于干净的代码、清晰的流程和有条不紊的调试。 优化开发环境和流程以消除摩擦非常重要。选择像 VSCode 这样的集成开发环境&#xff0c;并在开始项目前花时间学习其功能。以描述性的方式命名变量和函数&#xff0c;而不是使用缩写。应将表达式分解成较小的可读部分并分配给…

当数据库遇上深度学习:AI DataLoader 助力因子管理模型训练全流程

深度学习模型有能力自动发现变量之间的关系&#xff0c;而这些关系通常是不可见的&#xff0c;这使得深度学习可以挖掘新的因子和规律&#xff0c;为量化投资策略提供更多可能性。在传统的量化策略开发流程中&#xff0c;通常会使用 Python 或第三方工具生成因子&#xff0c;并…

SpringBoot整合MyBatis-Plus详解(二)

文章目录 SpringBoot整合MyBatis-Plus详解&#xff08;二&#xff09;MyBatis-Plus简介条件构造器和常用接口⭐Wrapper介绍QueryWrapper&#xff08;Mapper接口提供的&#xff09;和QueryChainWrapper&#xff08;Service接口提供的&#xff09;案例1&#xff1a;组装查询条件案…

Unity报错:Microsoft Visual C# Compiler version

Unity报错:Microsoft Visual C# Compiler version 问题解决方案总结 问题 Microsoft Visual C# Compiler version 2.9.1.65535 (9d34608e) Copyright © Microsoft Corporation 切换版本或者使用老项目的时候可能会出现这个报错&#xff0c;这个报错就是项目设置的问题 …

【HarmonyOS】元服务卡片展示动态数据,并定点更新卡片数据

【关键字】 元服务卡片、卡片展示动态数据、更新卡片数据 【写在前面】 本篇文章主要介绍开发元服务卡片时&#xff0c;如何实现卡片中动态显示数据功能&#xff0c;并实现定时数据刷新。本篇文章通过实现定时刷新卡片中日期数据为例&#xff0c;讲述展示动态数据与更新数据功…

C++前缀和算法的应用:从栈中取出 K 个硬币的最大面值和 原理源码测试用例

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 题目 一张桌子上总共有 n 个硬币 栈 。每个栈有 正整数 个带面值的硬币。 每一次操作中&#xff0c;你可以从任意一个栈的 顶部 取出 1 个硬币&#xff0c;从栈中移除…

深入探究ASEMI肖特基二极管MBR60100PT的材质

编辑-Z 在电子零件领域中&#xff0c;肖特基二极管MBR60100PT因其出色的性能和广泛的应用而显得尤为关键。理解其材质不仅有助于我们深入理解其运作原理&#xff0c;也有助于我们做出更合适的电子设计。那么&#xff0c;肖特基二极管MBR60100PT是什么材质呢? 首先&#xff0c…

前端面试基础题——12

1.什么是Vuex&#xff1f; 2.为什么浏览器不能读取 JSX&#xff1f; 3.什么是JSX&#xff1f; 4.当你调用 setState 的时候&#xff0c;发生了什么事&#xff1f; 5.React组件生命周期的阶段是什么&#xff1f; 6.React 中 refs 的作用是什么&#xff1f; 7.类组件(Class…

电厂数据可视化三维大屏展示平台加强企业安全防范

园区可视化大屏是一种新型的信息化手段&#xff0c;能够将园区内各项数据信息以图像的形式直观呈现在大屏幕上&#xff0c;便于管理员和员工进行实时监控、分析和决策。本文将从以下几个方面介绍园区可视化大屏的作用和应用。 VR数字孪生园区系统是通过将实际园区的各种数据和信…