【Vue3】响应式数据

【Vue3】响应式数据

  • 背景
  • 简介
  • 开发环境
  • 基本数据类型
  • 对象数据类型
    • 使用 reactive 定义对象类型响应式数据
    • 使用 ref 定义对象类型响应式数据
  • ref 和 reactive 的对比
  • 使用原则建议

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中响应式数据的编写方法。

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.91.1

基本数据类型

在 【Vue3】组合式 API 基础上修改 Vue 根组件 App.vue 代码。

<!-- 组件结构 -->
<template><div class="person"><h3>姓名:{{ name }}</h3><h3>生日:{{ birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate() }}</h3><button @click="showContact">查看联系方式</button><button @click="changeName">修改名字</button></div>
</template><script setup lang="ts" name="App">
import { ref } from 'vue'// 数据定义
let name = ref('哈利·波特')
let birth = new Date('1980-07-31')
let contact = '霍格沃茨魔法学校格兰芬多学院'// 方法定义
function showContact() {alert(contact)
}function changeName() {name.value = 'Harry Potter'
}
</script><!-- 组件样式 -->
<style lang="scss">
.person {background-color: cadetblue;border-radius: 5px;color: white;padding: 20px;button {background-color: gold;border-radius: 5px;padding: 5px 10px;margin-right: 10px;}
}
</style>

对象数据类型

使用 reactive 定义对象类型响应式数据

<!-- 组件结构 -->
<template><div class="person"><h3>姓名:{{ person.name }}</h3><h3>生日:{{ person.birth.getFullYear() + '-' + (person.birth.getMonth() + 1) + "-" + person.birth.getDate() }}</h3><button @click="showContact">查看联系方式</button><button @click="changeName">修改名字</button></div>
</template><script setup lang="ts" name="App">
import { reactive } from 'vue'let person = reactive({name: '哈利·波特',birth: new Date('1980-07-31'),contact: '霍格沃茨魔法学校格兰芬多学院'
})// 方法定义
function showContact() {alert(person.contact)
}function changeName() {person.name = 'Harry Potter'
}
</script><!-- 组件样式 -->
<style lang="scss">
.person {background-color: cadetblue;border-radius: 5px;color: white;padding: 20px;button {background-color: gold;border-radius: 5px;padding: 5px 10px;margin-right: 10px;}
}
</style>

使用 ref 定义对象类型响应式数据

<!-- 组件结构 -->
<template><div class="person"><h3>姓名:{{ person.name }}</h3><h3>生日:{{ person.birth.getFullYear() + '-' + (person.birth.getMonth() + 1) + "-" + person.birth.getDate() }}</h3><button @click="showContact">查看联系方式</button><button @click="changeName">修改名字</button></div>
</template><script setup lang="ts" name="App">
import { ref } from 'vue'let person = ref({name: '哈利·波特',birth: new Date('1980-07-31'),contact: '霍格沃茨魔法学校格兰芬多学院'
})// 方法定义
function showContact() {alert(person.value.contact)
}function changeName() {person.value.name = 'Harry Potter'
}
</script><!-- 组件样式 -->
<style lang="scss">
.person {background-color: cadetblue;border-radius: 5px;color: white;padding: 20px;button {background-color: gold;border-radius: 5px;padding: 5px 10px;margin-right: 10px;}
}
</style>

ref 和 reactive 的对比

  • ref 可以定义基本类型以及对象类型的响应式数据,而 reactive 只能定义对象类型的响应式数据;
  • ref 定义对象类型响应式数据时,底层实际使用的也是 reactive
  • <script> 中使用 ref 定义的响应式数据时,必须使用变量的 .value 属性,reactive 不存在此问题;
  • 如果为 reactive 定义的响应式数据重新分配一个对象,则会失去响应式行为,可以通过 Object.assign()reactive 定义的响应式数据对象整体替换掉。
  • 通过 console.log 打印出由 refreactive 定义的响应式数据,可见其底层实现不同:
    • reactive 定义的响应式数据是 JavaScript 标准内置对象 Proxy,是对原对象的代理,可实现对原对象操作的拦截及自定义。
      在这里插入图片描述

    • ref 定义的响应式数据是 RefImpl 的一个实例对象,原数据在 value 属性中,可见如果原数据为对象类型,则 RefImpl 实例的 value 属性也是 JavaScript 标准内置对象 Proxy,底层与 reactive 一致。
      在这里插入图片描述

使用原则建议

  • 如果需要一个基本类型的响应式数据,则必须使用 ref
  • 如果需要一个对象类型的响应式数据且层级不深,则 refreactive 中可任选一个;
  • 如果需要一个对象类型的响应式数据且层级较深,则推荐使用 reactive
  • 如果不想因区分使用场景烦恼,则直接使用 ref

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

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

相关文章

牛客:TOP101链表相加(二)

文章目录 1. 题目描述2. 解题思路3. 代码实现 1. 题目描述 2. 解题思路 按照我们习惯的加法运算&#xff0c;肯定是要从个位开始相加&#xff0c;然后十位……&#xff0c;但是在链表中如果我们先运算后面的&#xff0c;那么接下来我们是无法找到前一位的。想要解决这个问题也很…

【架构艺术】大规模业务逻辑迁移实践

对于一个成熟的工程项目而言&#xff0c;因为项目未来发展或是和企业内部更深度融合的需要&#xff0c;我们可能需要对既有业务逻辑做很大规模的改动&#xff0c;涉及到多方面的逻辑迁移和代码重构&#xff0c;才能够达到下一代产品所需要的效果。 今天这篇文章&#xff0c;就…

优选算法之滑动窗口(下)

目录 一、水果成篮 1.题目链接&#xff1a;904.水果成篮 2.题目描述&#xff1a; 3.解法&#xff08;滑动窗口&#xff09; &#x1f341;算法思路&#xff1a; &#x1f341;算法流程&#xff1a; &#x1f341;算法代码1&#xff08;使用容器&#xff09;&#xff1a; …

数模·插值和拟合算法

插值 将离散的点连成曲线或者线段的一种方法 题目中有"任意时刻任意的量"时使用插值&#xff0c;因为插值一定经过样本点 插值函数的概念 插值函数与样本离散的点一一重合 插值函数往往有多个区间&#xff0c;多个区间插值函数样态不完全一样&#xff0c;简单来说就…

C的预编译指令

预编译指令 #include对于形如 #include "demo.h" 的指令&#xff1a;对于形如 #include <demo.h> 的指令&#xff1a; #define简单宏替换带参数的宏 #ifdef, #ifndef, #if#pragma#error#line 在C语言中&#xff0c;预编译指令用于在编译之前进行代码的预处理。…

etcd磁盘空间故障处理办法

查看etcd状态 etcdctl --cacert=/etc/kubernetes/ssl/ca.crt --cert=/etc/kubernetes/ssl/etcd_server.crt --key=/etc/kubernetes/ssl/etcd_server.key --endpoints=https://10.10.10.31:1159,https://10.10.10.32:1159,https://10.10.10.33:1159 endpoint status --write-…

【系统架构设计 每日一问】二 MySql主从复制延迟可能是什么原因,怎么解决

主从复制的架构设计如下图所示&#xff1a; 同步原理 具体到数据库之间是通过binlog和复制线程操作的&#xff1a; Master的更新事件(update、insert、delete)会按照顺序写入bin-log中。当Slave连接到Master的后,Master机器会为Slave开启&#xff0c;binlog dump线程,该线程…

24、获取NCL色标并将其保存为Excel文件

文章目录 1. 前言2. 代码 1. 前言 在数据可视化的世界里&#xff0c;色彩不仅仅是视觉的盛宴&#xff0c;更是信息的传递者。NCL&#xff08;The NCAR Command Language&#xff09;色标&#xff0c;作为气象和环境科学领域的瑰宝&#xff0c;以其丰富的色彩组合和科学的编排&…

Linux指令ros学习python深度学习bug学习笔记

## 这个文件是关于ros、linux指令&#xff0c;pytorch、python、onnx和相关problem的一些笔记 ### ROS && linux **find: 在当前路径或指定的路径下递归地搜索文件或目录&#xff0c;并可以根据不同的条件进行过滤和匹配。** find -name *.py find /home/dai/bev_…

H3CNE(计算机网络的概述)

1. 计算机网络的概述 1.1 计算机网络的三大基本功能 1. 资源共享 2. 分布式处理与负载均衡 3. 综合信息服务 1.2 计算机网络的三大基本类型 1.3 网络拓扑 定义&#xff1a; 网络设备连接排列的方式 网络拓扑的类型&#xff1a; 总线型拓扑&#xff1a; 所有的设备共享一…

Vue3 --- 路由

路由就是一组key-value的对应关系&#xff1b;多个路由&#xff0c;需要经过路由器的管理。 1. 基本切换效果 安装路由器 npm i vue-router /router/index.ts // import { createRouter, createWebHistory } from vue-router import Home from /components/Home.vue import…

Python面试整理-字典和集合的操作

在Python中,字典(dictionary)和集合(set)是两种非常有用的数据结构,用于存储和操作数据集。字典是一种键值对的集合,而集合是一种只包含唯一元素的集合。下面详细介绍它们的常用操作: 字典操作 创建字典 person = {"name": "Alice",

萝卜快跑爆火的背后,美格智能如何助力无人车商业化?

近期&#xff0c;“订单量超过600万单”等夺人眼球的信息&#xff0c;让无人驾驶出租车“萝卜快跑”从江城武汉爆火出圈&#xff0c;在2024年的炎炎夏日为这座大火炉再添了一把火。热度背后&#xff0c;不少地方主管部门&#xff0c;近期也纷纷针对无人驾驶出租车、无人驾驶运输…

基于术语词典干预的机器翻译挑战赛笔记Task2 #Datawhale AI 夏令营

上回&#xff1a; 基于术语词典干预的机器翻译挑战赛笔记Task1 跑通baseline Datawhale AI 夏令营-CSDN博客文章浏览阅读718次&#xff0c;点赞11次&#xff0c;收藏8次。基于术语词典干预的机器翻译挑战赛笔记Task1 跑通baselinehttps://blog.csdn.net/qq_23311271/article/d…

C++树形结构(2 树的直径)

目录 1.定义&#xff1a; 2.直径的性质&#xff1a; 3.树的直径求解方法&#xff1a; 4.直径端点求解方法&#xff1a; 朴素方法&#xff1a; 优化方法&#xff1a; 5.例题&#xff1a; 6.直径公共点&#xff1a; 7.例题&#xff1a; 8.去掉再加上&#xff1a; 9.例…

最新版kubeadm搭建k8s(已成功搭建)

kubeadm搭建k8s&#xff08;已成功搭建&#xff09; 环境配置 主节点 k8s-master&#xff1a;4核8G、40GB硬盘、CentOS7.9&#xff08;内网IP&#xff1a;10.16.64.67&#xff09; 从节点 k8s-node1&#xff1a; 4核8G、40GB硬盘、CentOS7.9&#xff08;内网IP&#xff1a;10…

【极客日常】Golang一个的slice数据替换的bug排查

上周某天下班前&#xff0c;接到同事转来一个bug要排查&#xff0c;症状是代码重构之后某些业务效果不符合预期&#xff0c;由于代码重构人是笔者&#xff0c;于是blame到笔者这边。经过10min左右的排查和尝试后&#xff0c;解决了这个问题&#xff1a;既往逻辑没有改动&#x…

框架使用及下载

Bootstrap5 安装使用 | 菜鸟教程 (runoob.com) https://github.com/twbs/bootstrap/releases/download/v5.1.3/bootstrap-5.1.3-dist.zip&#xff08;下载链接&#xff09; Staticfile CDN&#xff08;html的所有框架合集&#xff09; 直接在w3cschool里面看参考文件进行搜索自…

时间序列问题解题(基于深度学习)(Datawhale AI 夏令营)

一&#xff0c;解题步骤 时间序列问题是指基于时间顺序的数据进行分析和预测的问题。在深度学习的背景下&#xff0c;常用的模型包括循环神经网络&#xff08;RNN&#xff09;&#xff0c;长短期记忆网络&#xff08;LSTM&#xff09;和门控循环单元&#xff08;GRU&#xff0…

RHCSA —— 第八节 (编辑器、编辑命令等)

Vi/vim编辑器 vim 编辑器 就是相当于在windows中创建一个记事本&#xff0c;一个word文档里面进行编辑所需要的内容。在linux中编辑文本文件&#xff0c;包括但不限于编辑源代码、配置文件、日志文件等文件内容。 三种模式 这是在编辑器中存在三种模式&#xff1a;命令模式、…