vue data变量之间相互赋值或进行数据联动

在这里插入图片描述
摘要:

使用vue时开发会用到data中是数据是相互驱动,经常会想到watch,computed,总结一下!

直接赋值:
在 data 函数中定义的变量可以直接在方法中进行赋值。

export default {data() {return {a: 1,b: 2};},methods: {updateA() {this.b = this.a + 1; // 将 a 的值加 1 赋给 b}}
};

计算属性 (Computed Properties):
计算属性可以根据其他 data 变量的值动态计算出新的值,并且会自动更新。

export default {data() {return {a: 1};},computed: {b() {return this.a + 1; // b 的值始终是 a 的值加 1}}
};

侦听器 (Watchers):
侦听器可以监听某个 data 变量的变化,并在变化时执行特定的逻辑。

export default {data() {return {a: 1,b: 2};},watch: {a(newVal) {this.b = newVal + 1; // 当 a 发生变化时,更新 b 的值}}
};

生命周期钩子:
在某些生命周期钩子中也可以进行数据的赋值和联动

export default {data() {return {a: 1,b: 2};},created() {this.b = this.a + 1; // 在组件创建时进行赋值}
};

事件处理:
通过事件处理函数也可以实现数据的联动。

export default {data() {return {a: 1,b: 2};},methods: {handleEvent() {this.a += 1;this.b = this.a + 1; // 在事件处理中更新 a 和 b}}
};

使用 Vuex 管理状态:
对于复杂的状态管理,可以使用 Vuex 来集中管理应用的状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {a: 1,b: 2},mutations: {updateA(state, value) {state.a = value;state.b = state.a + 1; // 更新 b 的值}},actions: {updateA({ commit }, value) {commit('updateA', value);}},getters: {b(state) {return state.b;}}
});// 组件中使用
<template><div><p>a: {{ a }}</p><p>b: {{ b }}</p><button @click="updateA">Update A</button></div>
</template><script>
import { mapState, mapActions } from 'vuex';export default {computed: {...mapState(['a', 'b'])},methods: {...mapActions(['updateA'])}
};
</script>

组件中使用:(typescript)

<template><div><p>a: {{ a }}</p><p>b: {{ b }}</p><button @click="updateA">Update A</button></div>
</template><script>
import { mapState, mapActions } from 'vuex';export default {computed: {...mapState(['a', 'b'])},methods: {...mapActions(['updateA'])}
};
</script>

使用 Ref 和 Reactive (Vue 3):
在 Vue 3 中,可以使用 ref 和 reactive 来管理响应式数据。

<template><div><p>a: {{ a }}</p><p>b: {{ b }}</p><button @click="updateA">Update A</button></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const a = ref(1);const b = computed(() => a.value + 1);const updateA = () => {a.value += 1;};return {a,b,updateA};}
};
</script>

使用 reactive:

<template><div><p>a: {{ state.a }}</p><p>b: {{ state.b }}</p><button @click="updateA">Update A</button></div>
</template><script>
import { reactive, computed } from 'vue';export default {setup() {const state = reactive({a: 1,b: 2});const updateA = () => {state.a += 1;state.b = state.a + 1;};return {state,updateA};}
};
</script>

总结:

  1. 直接赋值:适用于简单的数据更新。
  2. 计算属性:适用于依赖其他数据的派生数据。
  3. 侦听器:适用于需要在数据变化时执行复杂逻辑的情况。
  4. 生命周期钩子:适用于在组件生命周期的特定阶段进行数据初始化或更新。
  5. 事件处理:适用于用户交互触发的数据更新。
  6. Vuex:适用于复杂的状态管理和多个组件之间的数据共享。
  7. Ref 和 Reactive (Vue 3):适用于 Vue 3 中的响应式数据管理。

根据具体需求选择合适的方法,可以更高效地实现 data 变量之间的相互赋值和数据联动。

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

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

相关文章

TDengine 签约山东港,赋能港口数字化转型

随着全球港口物流数字化进程的加速&#xff0c;港口运营面临日益复杂的数据管理挑战&#xff0c;从能源管理、设备监控到运营安全保障&#xff0c;各类数据需要及时存储并高效分析。山东港在信息化建设过程中&#xff0c;数字化综合管理平台的性能和查询功能一度受到瓶颈制约。…

在 Java 中使用脚本语言

在 Java 中使用脚本语言&#xff0c;特别是在 Java 平台上集成如 Python、JavaScript 或 Ruby 等语言&#xff0c;通常可以通过 Java 的 Scripting API 来实现。这个 API 基于 JSR 223&#xff08;“Scripting for the Java Platform”&#xff09;&#xff0c;提供了一种标准方…

使用Python分析股票价格数据并计算移动平均线的实用指南

使用Python分析股票价格数据并计算移动平均线的实用指南 在金融市场中,移动平均线(Moving Average, MA)是一种常用的技术分析工具,用于平滑价格数据,帮助投资者识别趋势。本文将详细介绍如何使用Python分析股票价格数据,并计算移动平均线。我们将通过一个实际的案例来演…

大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

深入理解Go语言的接口与多态性

Go语言以其简洁高效的设计深受开发者喜爱,其中接口(interface)是Go的一个独特而强大的概念。接口不仅赋予了Go语言以多态性,还提供了代码复用的能力,是构建高质量软件的重要工具。本文将深入探讨Go语言的接口与多态性,并通过示例帮助您理解如何在实际项目中灵活运用它们。…

如何使用 VNC 服务器连接桌面

如何使用VNC软件去连接远程桌面系统呢? 一、什么是VNC? VNC(Virtual Network Computing,虚拟网络计算)是一种远程桌面共享协议,允许用户通过网络访问和控制远程计算机的桌面界面。VNC 使用的是一种基于图像的方式,将远程计算机的桌面环境发送到客户端的显示设备上,同时…

微服务系列六:分布式事务与seata

目录 实验环境说明 前言 一、分布式事务问题与策略 1.1 分布式事务介绍 1.2 分布式事务解决策略分析 二、分布式事务解决方案 Seata 2.1 认识Seata 2.2 Seata的工作原理 2.3 部署Seata微服务 2.3.1 准备数据库表 2.3.2 准备配置文件 2.3.3 docker部署 2.4 微服务集…

Java 上机实践2(基础数据类型与数组)

&#xff08;大家好&#xff0c;今天分享的是Java的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 实验一&#xff1a;输出希腊字母表 一、实验目的 二、实验要求 三、程序代码 四、实验结果 实验二&#xff1a;…

w024基于SpringBoot的企业客户管理系统的设计与实现

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0…

并发编程volatile精解

多线程下变量的不可见性 在多线程并发执行的情况下&#xff0c;多个线程修改共享的成员变量&#xff0c;会出现一个线程修改了共享变量的值后&#xff0c;另一个线程不能直接看到该线程修改后的变量最新值。(多线程下修改共享变量会出现变量修改值后的不可见性) 可见性问题…

十款外贸软件盘点,专注企业订单业务管理

在当今全球化的市场环境中&#xff0c;外贸企业的发展面临着诸多挑战与机遇。如何高效管理企业业务&#xff0c;提升运营效率&#xff0c;成为外贸企业在激烈竞争中脱颖而出的关键。外贸业务管理ERP软件作为一种强大的工具&#xff0c;能够整合企业资源、优化管理流程、实现数据…

yaml文件编写

Kubernetes 支持YAML和JSON格式管理资源 JSON 格式:主要用于 api 接口之间消息的传递 YAML 格式;用于配置和管理,YAML是一种简洁的非标记性语言,内容格式人性化容易读懂 一&#xff0c;yaml语法格式 1.1 基本语法规则 使用空格进行缩进&#xff08;不使用制表符&#xff0…

Node.js 全栈开发进阶篇

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;node.js篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:node.js- 全栈开发进阶篇 前言 大家好&#xff0c;我是青山。在上一篇文章中&#xff0c;…

密码学与数学证明。

通常的数学证明工具主要有&#xff1a;以平行公设为基础的几何证明体系&#xff0c;以牛顿三定律为基础的经典力学证明体系&#xff0c;以四则计算为基础的计算证明方法&#xff0c;以正则三段论为基础的断言思证系统&#xff0c;以数学归纳法和夹挤定理为基础的包络收敛分析证…

Vue(JavaScript)读取csv表格并求某一列之和(大浮点数处理: decimal.js)

文章目录 想要读这个表格&#xff0c;并且求第二列所有价格的和方法一&#xff1a;通过添加文件输入元素上传csv完整&#xff08;正确&#xff09;代码之前的错误部分因为价格是小数&#xff0c;所以下面的代码出错。如果把parseFloat改成parseInt&#xff0c;那么求和没有意义…

C语言初阶必会的练习题(3)之位操作符(^ 、、>>等)的应用

C语言初阶必会的练习题&#xff08;3&#xff09; 放在最前面的1、不允许创建临时变量&#xff0c;交换两个整数的内容1.1、分析&#xff1a;见代码注释&#xff08;a&#xff09;方法 1&#xff08;b&#xff09;方法 2 1.2、结果展示方法 1 的 结果&#xff1a;方法 2 的 结果…

基于SSM框架的乡村农户对口扶贫系统

基于SSM框架的乡村农户对口扶贫系统。 设计步骤&#xff1a; 项目架构创建&#xff1a;首先创建项目的基本架构&#xff0c;包括com.zc.xxx路径下的文件和resources资源文件夹。 SSM架构&#xff1a;使用Spring、SpringMVC、MyBatis作为后端架构&#xff0c;采用POJO—Dao—…

前端Web用户 token 持久化

用户 token 持久化 业务背景&#xff1a;Token的有效期会持续一段时间&#xff0c;在这段时间内没有必要重复请求token&#xff0c;但是pinia本身是基于内存的管理方式&#xff0c;刷新浏览器Token会丢失&#xff0c;为了避免丢失需要配置持久化进行缓存 基础思路&#xff1a…

【学习笔记】SAP ABAP——OPEN SQL(一)【INTO语句】

【INTO语句】 结构体插入(插入一条语句时) SELECT...INTO [CORRESPONDING FIELDS OF] <wa> FROM <db> WHERE <condition>.内表插入(插入多条语句时) SELECT...INTO|APPENDING [CORRESPONDING FIELDS OF] TABLE <itab>FROM <db> WHERE <con…

微服务透传日志traceId

问题 在微服务架构中&#xff0c;一次业务执行完可能需要跨多个服务&#xff0c;这个时候&#xff0c;我们想看到业务完整的日志信息&#xff0c;就要从各个服务中获取&#xff0c;即便是使用了ELK把日志收集到一起&#xff0c;但如果不做处理&#xff0c;也是无法完整把一次业…