Vue 3.0 响应性 基础

文章目录

  • 前言
  • 声明响应式状态
  • 创建独立的响应式值作为 refs
  • Ref 展开
  • 访问响应式对象
  • 响应式状态解构
  • 使用 readonly 防止更改响应式对象
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:vue.js
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

声明响应式状态

要为 JavaScript 对象创建响应式状态,可以使用 reactive 方法:

import { reactive } from 'vue'// 响应式状态
const state = reactive({count: 0
})

reactive 相当于 Vue 2.x 中的 Vue.observable() API ,为避免与 RxJS 中的 observables 混淆因此对其重命名。该 API 返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property。

Vue 中响应式状态的基本用例是我们可以在渲染期间使用它。因为依赖跟踪的关系,当响应式状态改变时视图会自动更新。

这就是 Vue 响应性系统的本质。当从组件中的 data() 返回一个对象时,它在内部交由reactive()使其成为响应式对象。模板会被编译成能够使用这些响应式property的渲染函数。

创建独立的响应式值作为 refs

想象一下,我们有一个独立的原始值 (例如,一个字符串),我们想让它变成响应式的。当然,我们可以创建一个拥有相同字符串property的对象,并将其传递给 reactiveVue 为我们提供了一个可以做相同事情的方法 ——ref:

import { ref } from 'vue'const count = ref(0)

ref 会返回一个可变的响应式对象,该对象作为它的内部值——一个响应式的引用,这就是名称的来源。此对象只包含一个名为valueproperty

import { ref } from 'vue'const count = ref(0)
console.log(count.value) // 0count.value++
console.log(count.value) // 1

Ref 展开

当 ref 作为渲染上下文 (从 setup() 中返回的对象) 上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 .value

<template><div><span>{{ count }}</span><button @click="count ++">Increment count</button></div>
</template><script>import { ref } from 'vue'export default {setup() {const count = ref(0)return {count}}}
</script>

访问响应式对象

当 ref 作为响应式对象的 property 被访问或更改时,为使其行为类似于普通 property,它会自动展开内部值:

const count = ref(0)
const state = reactive({count
})console.log(state.count) // 0state.count = 1
console.log(count.value) // 1

如果将新的 ref 赋值给现有 ref 的 property,将会替换旧的 ref:

const otherCount = ref(2)state.count = otherCount
console.log(state.count) // 2
console.log(count.value) // 1

Ref 展开仅发生在被响应式 Object 嵌套的时候。当从 Array 或原生集合类型如 Map访问 ref 时,不会进行展开:

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

响应式状态解构

当我们想使用大型响应式对象的一些 property 时,可能很想使用 ES6 解构来获取我们想要的 property:

import { reactive } from 'vue'const book = reactive({author: 'Vue Team',year: '2020',title: 'Vue 3 Guide',description: 'You are reading this book right now ;)',price: 'free'
})let { author, title } = book

遗憾的是,使用解构的两个 property 的响应性都会丢失。对于这种情况,我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联:

import { reactive, toRefs } from 'vue'const book = reactive({author: 'Vue Team',year: '2020',title: 'Vue 3 Guide',description: 'You are reading this book right now ;)',price: 'free'
})let { author, title } = toRefs(book)title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题,现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'

使用 readonly 防止更改响应式对象

有时我们想跟踪响应式对象 (ref 或 reactive) 的变化,但我们也希望防止在应用程序的某个位置更改它。例如,当我们有一个被 provide 的响应式对象时,我们不想让它在注入的时候被改变。为此,我们可以基于原始对象创建一个只读的Proxy对象:

import { reactive, readonly } from 'vue'const original = reactive({ count: 0 })const copy = readonly(original)// 在copy上转换original 会触发侦听器依赖original.count++// 转换copy 将导失败并导致警告
copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly."

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

【多线程】-- 08 线程状态观测、线程优先级、守护线程

多线程 5 线程状态 5.5 线程状态观测 Thread.State线程可以处于以下状态之一&#xff1a; NEW&#xff1a;尚未启动的线程处于此状态RUNNABLE&#xff1a;在Java虚拟机中执行的线程处于此状态BLOCKED&#xff1a;被阻塞等待监视器锁定的线程处于此状态WAITING&#xff1a;正…

英语助教求职简历模板(通用10篇)

以下10篇简历内容以英语助教招聘需求为背景制作&#xff0c;大家可以借鉴参考&#xff0c;希望能帮助大家在众多候选人中脱颖而出。 英语助教求职简历下载&#xff08;可在线制作)&#xff1a;百度幻主简历 英语助教简历1&#xff1a; 求职意向 求职类型&#xff1a;全职 …

Jmeter分布式压测

一、jmeter为什么要做分布式压测 jmeter本身的局限性 一台压力机的 Jmeter 支持的线程数受限于 Jmeter 其本身的机制和硬件配置&#xff08;内存、CPU等&#xff09;是有限的由于 Jmeter 是 Java 应用&#xff0c;对 CPU 和内存的消耗较大&#xff0c;在需要模拟大量并发用户…

GPT市场将取代插件商店 openAI已经关闭plugins申请,全部集成到GPTs(Actions)来连接现实世界,可以与物理世界互动了。

Actions使用了plugins的许多核心思想&#xff0c;也增加了新的特性。 ChatGPT的"Actions"与"Plugins"是OpenAI在GPT模型中引入的两种不同的功能扩展机制。这两种机制的目的是增强模型的功能&#xff0c;使其能够处理更多样化的任务和请求。下面是对两者的比…

区间合并算法总结

区间合并使用贪心算法&#xff0c;对于区间问题&#xff0c;通常需要对左端点排序、右端点排序或者左端点和右端点双关键字排序。区间合并算法的算法步骤&#xff1a; 1. 按照区间左端点排序。 2. 扫描过程中&#xff0c;每次维护一个当前的区间。 题目链接&#xff1a; htt…

熬夜会秃头——Beta冲刺总结随笔

这个作业属于哪个课程2301-计算机学院-软件工程社区-CSDN社区云这个作业要求在哪里团队作业—beta冲刺事后诸葛亮-CSDN社区这个作业的目标总结Beta冲刺团队名称熬夜会秃头团队置顶集合随笔链接熬夜会秃头——Beta冲刺置顶随笔-CSDN社区 目录 一、Beta冲刺开始前设立的任务完成…

[Firefly-Linux] RK3568 Ubuntu固件分区详解

RK为了方便开发与产品定制,自己定义了一套固件的分区,这些分区信息存放在parameter.txt文件中,Firefly参考这个文件定义了自己的Ubuntu分区,文件为parameter-ubuntu.txt,存放于Linux_SDK的device/rockchip/rk356x目录下;另外在Ubuntu固件打包的时候也会用到一个package-f…

VMware虚拟机搭建+云平台购买搭建(阿里云+UCloud)【设置主机名以及主机名映射、配置免密登录、配置JDK】

本地虚拟机的搭建 一、准备网段 在VMware的虚拟网络编辑器中将VMnet8虚拟网卡的 网段设置为&#xff1a;192.168.88.0网关设置为&#xff1a;192.168.88.2 二、下载CentOS操作系统文件&#xff0c;并安装 三、克隆多台虚拟机 依照同样的方法&#xff0c;克隆出node2…

设计模式精讲:掌握工厂方法与抽象工厂的精髓

设计模式精讲&#xff1a;掌握工厂方法与抽象工厂的精髓 一、引言&#xff1a;如何学习设计模式&#xff1f;二、工厂方法&#xff08;也叫工厂模式&#xff09;2.1、代码结构2.2、符合的设计原则2.3、小结 三、抽象工厂3.1、代码结构3.2、符合的设计原则3.3、小结 总结 一、引…

rust持续学习 COW

COW我第一次看见还以为是奶牛 很奇怪是个啥 后来了解到是clone on write 缩写的&#xff0c;大乌龙啊 这个有两种enum,一种是borrow&#xff0c;一种是own rust中&#xff0c;数据读写经常涉及到所有权 这个borrow&#xff0c;很显然&#xff0c;就是不可变借用了 own就是可以写…

使用cmake创建opengl项目

愿天下没有难配置的opengl 一个通用的cmake文件 cmake_minimum_required(VERSION 2.8) project(lab7) ​ # 设置FreeGLUT和GLM的路径 set(GLUT_INCLUDE_DIR "F:/chaojiliangzai/univer_canterbury_raytrace/freeglut-3.4.0.tar/freeglut-3.4.0/include") set(GLUT_LI…

北邮22级信通院数电:Verilog-FPGA(12)第十二周实验(2)彩虹呼吸灯

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 目录 一.代码部分 二.管脚分配 三.实验效果 一.代…

大势智慧荣获2023光合组织解决方案大赛人工智能赛道标杆奖及争先奖!

近日&#xff0c;2023年第三届光合组织解决方案大赛获奖名单正式公布。大势智慧以基于国产化平台的实景三维全流程解决方案&#xff0c;突破层层选拔&#xff0c;最终荣获“集智计划”&#xff08;人工智能赛道&#xff09;标杆奖及争先奖。 实景三维是我国的数字基础设施&…

【Go】protobuf介绍及安装

目录 一、Protobuf介绍 1.Protobuf用来做什么 2. Protobuf的序列化与反序列化 3. Protobuf的优点和缺点 4. RPC介绍 <1>文档规范 <2>消息编码 <3>传输协议 <4>传输性能 <5>传输形式 <6>浏览器的支持度 <7>消息的可读性和…

R语言实验三

1、读取一个文件并进行如下操作。 ①使用命令清空工作空间&#xff0c;使用read.table读取exam_1.txt文件&#xff0c;将文件保存到data变量中&#xff0c;数据第一行设置为列名&#xff0c;第一列是行名。 ②判断对象data是否为矩阵。 ③将对象转换为矩阵&#xff0c;记为d…

day3 链表(一)

2023.12.1 代码随想录刷题Day3 1. 203移除链表元素 对于链表的各种操作备考时也是烂熟于心&#xff0c;这么长时间没写过相关代码&#xff0c;也确实忘了很多&#xff0c;关于移除链表元素&#xff0c;逻辑其实很简单&#xff0c;主要还是看对指针的使用是否熟悉&#xff0c;其…

M365 E5 eDiscovery Audit产品介绍部署方案

目录 一、M365 E5 eDiscovery & Audit 产品介绍 1. 功能介绍 2. 产品优势 3. 应用场景

Springboot项目启动成功后可通过五种方式继续执行

实现CommandLineRunner接口 项目初始化完毕后&#xff0c;才会调用方法&#xff0c;提供服务 Component public class StartRunner implements CommandLineRunner {Overridepublic void run(String... args) throws Exception {System.out.println("CommandLineRunner&qu…

【SpringBoot3+Vue3】七【后续2】【番外篇】- (使用docke部署)

目录 一、maven打包后端服务 1、clean 2、package 3、查看jar包 二、部署java后端服务 1、使用dockerfile构建一个java17的镜像 1.1 使用dokcerfile构建容器命令 1.2 方式一 将jar打包进容器镜像 1.3 方式二 jar不打包进容器镜像&#xff0c;通过映射主机目录映射方式…