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,一经查实,立即删除!

相关文章

在 Java 中使用脚本语言

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

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

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

微服务系列六:分布式事务与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;…

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—…

微服务透传日志traceId

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

十五:java web(7)-- Spring Boot

目录 1. Spring Boot 简介 1.1 简介 1.2 Spring Boot 的特点 1.3 Spring Boot 和 Spring 的关系 2. Spring Boot 快速入门 2.1 创建第一个 Spring Boot 项目 3. Spring Boot 配置管理 3.1 application.properties 和 application.yml 配置 这两种都可以 好像现在更推荐…

关于打开网页非常慢的解决方法

方法一&#xff1a;刷新dns缓存 ipconfig /flushdns方法二&#xff1a;许多网站&#xff0c;太落后&#xff0c;不支持ipv6&#xff0c;所以关闭ipv6即可

JDK1.5 java代码打包jar HmacSha256

文章目录 demo地址背景实现编写代码编译class文件打包 JAR 文件执行生成的 JAR 文件辅助验证方式 常见问题和解决方法常规生成jar方案maven插件idea工具 demo地址 https://github.com/xiangge-zx/HmacSha256 背景 最近接到一个需求,做一个可以用来HmacSha256加密的小工具&am…

Go八股(Ⅳ)***slice,string,defer***

***slice&#xff0c;string&#xff0c;defer*** 1.slice和arry的区别 arry&#xff1a; Go语言中arry即为数据的一种集合&#xff0c;需要在声明时指定容量和初值&#xff0c;且一旦声明就长度固定&#xff0c;访问时按照索引访问。通过内置函数len可以获取数组中的元素个…

Win系统通过命令行查看笔记本电池损耗/寿命/健康

在 Windows 10/11 系统中&#xff0c;可以通过指令查看笔记本电池的寿命情况&#xff0c;方法如下&#xff1a; 0&#xff0c;打开cmd/终端 键盘快捷键&#xff1a;Win R&#xff0c;然后输入cmd&#xff0c;点击【确定】 1&#xff0c;执行命令 在命令行中输入下面指令并按…

103 - Lecture 1

Introduction to Database 一、Introduction to Database Systems 1. 数据的定义 What is Data? EX: data could be a docx file storing your project status report; data could be a spreadsheet containing information • 数据只有在设计的场景中才有意义。&#xff…

【大数据学习 | kafka高级部分】kafka中的选举机制

controller的选举 首先第一个选举就是借助于zookeeper的controller的选举 第一个就是controller的选举&#xff0c;这个选举是借助于zookeeper的独享锁实现的&#xff0c;先启动的broker会在zookeeper的/contoller节点上面增加一个broker信息&#xff0c;谁创建成功了谁就是主…