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.rhkb.cn/news/462721.html

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

相关文章

安装Blender并使用

前言 该系列记录了如何用Blenderpro来构建自己的场景数据集&#xff0c;从环境搭建到后期构建数据集的整个流程 本文章是第一部分&#xff0c;BlenderPrc2的安装以及环境配置 部分参考https://blog.csdn.net/weixin_49521551/article/details/121573334 官方文档https://dlr…

百度SEO分析实用指南 提升网站搜索排名的有效策略

内容概要 在数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为提升网站曝光度的关键工具。本指南将带您了解SEO的基本知识&#xff0c;帮助您在复杂的网络环境中立足。我们将从关键词优化开始&#xff0c;重点讲解如何选择合适的关键词来提高搜索引擎排…

【蔬菜识别】Python+深度学习+CNN卷积神经网络算法+TensorFlow+人工智能+模型训练

一、介绍 蔬菜识别系统&#xff0c;本系统使用Python作为主要编程语言&#xff0c;通过收集了8种常见的蔬菜图像数据集&#xff08;‘土豆’, ‘大白菜’, ‘大葱’, ‘莲藕’, ‘菠菜’, ‘西红柿’, ‘韭菜’, ‘黄瓜’&#xff09;&#xff0c;然后基于TensorFlow搭建卷积神…

ESP8266 自定义固件烧录-Tcpsocket固件

一、固件介绍 固件为自定义开发的一个适配物联网项目的开源固件&#xff0c;支持网页配网、支持网页tcpsocket服务器配置、支持串口波特率设置。 方便、快捷、稳定&#xff01; 二、烧录说明 固件及工具打包下载地址&#xff1a; https://download.csdn.net/download/flyai…

探秘机器学习算法:智慧背后的代码逻辑

1、 线性回归 线性回归是预测连续变量的一种简单而有效的方法。其数学模型假设因变量 y 与自变量 x 之间存在线性关系&#xff0c;用公式表示为&#xff1a; ​ Python代码实现 import numpy as np from sklearn.linear_model import LinearRegression import matplotlib.…

【合肥工业大学】操作系统 习题解析 作业答案(仅作学习与交流/侵删)

第一章习题解析 1&#xff0e;设计现代OS的主要目标是什么&#xff1f; 答&#xff1a;&#xff08;1&#xff09;有效性 &#xff08; 2&#xff09;方便性 &#xff08; 3&#xff09;可扩充性 &#xff08; 4&#xff09;开放性 2&#xff0e; OS 的作用可表现在哪几个方…

要在微信小程序中让一个 `view` 元素内部的文字水平垂直居中,可以使用 Flexbox 布局

文章目录 主要特点&#xff1a;基本用法&#xff1a;常用属性&#xff1a; 要在微信小程序中让一个 view 元素内部的文字水平垂直居中&#xff0c;可以使用 Flexbox 布局。以下是如何设置样式的示例&#xff1a; .scan-button {display: flex; /* 启用 Flexbox 布局 */justify…

JSON交互处理

目录 一、什么是JSON 二、JSON和JavaScript对象互转 ​三、Controller返回JSON数据 3.1 使用Jackson 编写Controller 1. 一个对象 2. 多个对象 3. 输出时间对象 4. 优化&#xff1a;抽取为工具类 一、什么是JSON Json是JavaScript对象的字符串表示法&#xff0c;它用…

WPF+MVVM案例实战(十二)- 3D数字翻牌计时实现

文章目录 1、运行效果2、功能实现1、文件创建2、控件代码实现3、控件引用与菜单实现1.引用用户控件2.按钮菜单3、计时器界面实现4、源代码获取1、运行效果 3D数字翻牌计时 2、功能实现 1、文件创建 打开项目 Wpf_Examples ,在用户控件 UserControlLib 中创建 NumberFoldi…

无人机多机编队控制算法详解!

一、主要算法类型 长机-僚机法&#xff08;Leader-Follower&#xff09; 原理&#xff1a;通过设定一架无人机作为长机&#xff08;领航者&#xff09;&#xff0c;其他无人机作为僚机&#xff08;跟随者&#xff09;&#xff0c;僚机根据长机的信息来调整自身的飞行状态&#…

RL学习笔记-表格型方法

参考资料&#xff1a;蘑菇书&#xff1b;《世界冠军带你从零实践强化学习》B站课程 Q表格 前面讲马尔可夫过程的时候提到过Q函数&#xff0c;Q函数是在某状态s下采取某动作a得到的平均奖励&#xff08;状态动作价值&#xff09;。Q表格就是在状态和动作两个维度上可视化的一张二…

基于SSM+微信小程序的订餐管理系统(点餐2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的订餐管理系统实现了管理员和用户。管理端实现了 首页、个人中心、用户管理、菜品分类管理、菜品信息管理、订单信息管理、配送信息管理、菜品评价管理、订单投诉管理、…

太速科技-712-6U VPX飞腾处理器刀片计算机

6U VPX飞腾处理器刀片计算机 一、产品概述 该产品是一款基于国产飞腾FT-2000四核处理器或D2000八核处理器的高性能6U VPX刀片式计算机。产品提供了可支持全网状交换的高速数据通道&#xff0c;其中P1、P2均支持1个PCIe x16 Gen3或2个PCIe x8 Gen3或4个PCIe x4 Gen3总…

uaGate SI——实现OT与IT的安全连接

对于许多制造商来说&#xff0c;诸如工业物联网&#xff08;IIoT&#xff09;、信息物理系统&#xff08;CPS&#xff09;和大数据等概念已经开始与其智能工厂的愿景紧密相连。智能工厂是将信息技术&#xff08;IT&#xff09;的数字世界与运营技术&#xff08;OT&#xff09;的…

51c大模型~合集12

我自己的原文哦~ https://blog.51cto.com/whaosoft/11564858 #ProCo 无限contrastive pairs的长尾对比学习 , 个人主页&#xff1a;https://andy-du20.github.io 本文介绍清华大学的一篇关于长尾视觉识别的论文: Probabilistic Contrastive Learning for Long-Tailed Visua…

基于FPGA的图像双线性插值算法verilog实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 这里实现的是256*256双线性插值到512*512的系统模块 局部放大&#xff1a; 将数据导入到matlab&#xff0c;得到插值效果…

书生大模型第一关Linux基础知识

任务一&#xff1a;完成SSH连接与端口映射并运行hello_world.py 1.SSH及其端口映射 2.在VSCode中安装插件&#xff1a; 3.创建开发机 最后点击创建&#xff0c;然后可能需要等待一段较长的时间&#xff0c;大概需要5分钟左右&#xff0c;如果需要排队则更长时间 然后选择…

SpringBoot配置Access-Control-Allow-Origin

1. 配置过滤器 Component WebFilter(urlPatterns "/*", filterName "CorsFilter") public class CorsFilter implements Filter {Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, Serv…

如何压缩pdf文件的大小?5分钟压缩pdf的方法推荐

如何压缩pdf文件的大小&#xff1f;在现代办公和学习中&#xff0c;PDF文件因其稳定性和广泛的兼容性被广泛使用。然而&#xff0c;随着文件内容的增多&#xff0c;制作好的PDF文件常常变得过大&#xff0c;给使用带来了诸多不便。无论是电子邮件附件的发送&#xff0c;还是在线…

二十九、Python基础语法(继承-上)

一、概念介绍 继承&#xff1a;继承描述的是类与类之间的关系&#xff0c;集成之后子类对象可以直接使用父类中定义的方法的属性&#xff0c;可以减少代码冗余&#xff0c;提高编码效率。 二、继承语法 三、继承例子 # 定义一个父类 Animal class Animal:def __init__(self,…