vue3【实用教程】声明响应式状态(含ref,reactive,toRef(),toRefs() 等)

Vue 3 中的数据基于 JavaScript Proxy (代理) 实现响应式
( vue2 中的数据通过 Object.defineProperty() 方法和对数组变异方法的重写,实现响应式)

选项式 API

用 data 选项声明响应式状态,值为返回一个对象的函数。

  • 在创建组件实例的时候会调用此函数
  • 函数返回的对象会用响应式系统进行包装
  data() {return {count: 1}},

注意事项

  • data 的顶层属性避免用 $_开头(Vue 在组件实例上暴露的内置 API 使用 $ 作为前缀,也为内部属性保留 _ 前缀。)
  • 未在data中定义的组件实例新属性,无法触发响应式更新。
  • 始终通过 this 来访问响应式状态
  data() {return {someObject: {}}},mounted() {const newObject = {}this.someObject = newObjectconsole.log(newObject === this.someObject) // false}

这里原始的 newObject 不会变为响应式。

组合式 API

方式一 ref

用于创建值类型数据的响应式。

import { ref } from 'vue'// 定义一个初始值为数字 0 的响应式变量 countRef  
const countRef = ref(0)// 得到一个带有 .value 属性的 ref 对象
console.log(countRef ) // { value: 0 }// 通过 .value 访问 ref 响应式变量的值
console.log(countRef.value) // 0// 通过 .value 修改 ref 响应式变量的值
countRef.value++
  • 参数为响应式变量的初始值(当参数是一个对象时,ref() 会在内部调用reactive()
  • 返回一个带有 .value 属性的 ref 对象
  • 建议变量名以Ref为后缀,以便识别其是一个 ref 对象
  • 模板中使用时,ref 对象会自动解包,无需使用.value
<button @click="countRef++">{{ countRef }}
</button>
  • ref 对象在作为响应式对象的属性被访问或修改时会自动解包。
const countRef = ref(0)// reactive 的用法详见下文
const state = reactive({count:countRef 
})console.log(state.count) // 0 ,无需写成 state.count.valuestate.count = 1 // 无需写成 state.count.value
console.log(countRef .value) // 1
  • ref 的另一个功能是获取模板引用(即 vue2 中的 this.$refs)
<script setup>
import { ref, onMounted } from 'vue'// 获取到 ref 属性为 input 的模板元素的引用(ref 变量名必须和模板里的 ref 属性值相同)
const input = ref(null)// 生命周期:DOM 挂载完成
onMounted(() => {// input 输入框获得焦点(注意此处需使用.value)input.value.focus()
})
</script><template><!-- ref 属性为 input 的模板元素 --><input ref="input" />
</template>

为什么需要 ref

因为 vue3 的响应式是通过 proxy 实现的,但 proxy 只能给对象添加响应式,无法给值类型的数据添加响应式,所以需要通过 ref() 函数先将值类型的数据包装成一个带 value 属性的 ref 对象,才能实现值类型数据的响应式。

为什么需要 .value

因为 ref() 函数返回的是一个 ref 对象,响应式变量的值存储在 ref 对象的value 属性中,所以在 js 中读取和修改响应式变量的值的时候,都需要 .value ,但在以下情况中,为了方便使用,vue 对 ref 对象进行了自动解包,所以无需 .value

  1. 模板中使用 ref 对象
  2. ref 对象作为响应式对象的属性被访问或修改

方式二 reactive

用于创建对象类型数据的响应式。

import { reactive } from 'vue'const state = reactive({ count: 0 })
<button @click="state.count++">{{ state.count }}
</button>
  • reactive() 无需对源数据添加类似 ref 的包装,可使对象本身具有响应性
  • reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的
const raw = {}
const proxy = reactive(raw)// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

reactive() 的局限性

  • 只能用于对象类型数据 (对象、数组和如 Map、Set 这样的集合类型),不能用于 string、number 或 boolean 这样的值类型数据
  • 替换整个对象会丢失响应式(Vue 的响应式跟踪是通过属性访问实现的)
  • 解构会丢失响应式
const state = reactive({ count: 0 })// 当解构时,count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

其他相关 API

vue 提供了专门的API 来实现在不丢失响应式的情况下,解构响应式对象(reactive 创建),它们不创造响应式 (如 ref , reactive),而是延续响应式 (toRef , toRefs) !

toRef()

基于响应式对象上的属性,创建 ref (与源属性保持同步)

  • 第一个参数为 响应式对象(reactive 创建)
  • 第二个参数为 属性名
const state = reactive({foo: 1
})// 基于响应式对象 state 上的属性 foo ,创建 ref
const fooRef = toRef(state, 'foo')// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

vue3.3+ 新增了将值、refs 或 getters 规范化为 refs 的功能,详见官网
https://cn.vuejs.org/api/reactivity-utilities.html#toref

toRefs()

将响应式对象转换为每个属性都指向源对象相应属性的 ref 的普通对象

  • 推荐用法:合成函数返回响应式对象时,使用 toRefs,以便解构赋值时不丢失响应式。(详见下文的范例)
const state = reactive({foo: 1,bar: 2
})// 得到一个每个属性都是 ref 的普通对象
const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:{foo: Ref<number>,bar: Ref<number>
}
*/// 源属性改变,Refs 对象里的 ref 属性会同步改变
state.foo++
console.log(stateAsRefs.foo.value) // 2// Refs 对象里的 ref 属性改变,源属性会同步改变
stateAsRefs.foo.value++
console.log(state.foo) // 3

应用范例:解构对象属性,简化模板引用

<!-- 组合式API -->
<script setup>
import { reactive, toRefs } from "vue";function getMyInfo() {const me = reactive({name: "朝阳",age: 35,});// 使用 toRefs 避免丢失响应式return toRefs(me);
}// 通过解构赋值,便于模板中使用
let { name, age } = getMyInfo();const changeName = () => {name.value = "张三";
};
</script><template><p>姓名:{{ name }}</p><p>年龄:{{ age }}</p><button @click="changeName">改名</button>
</template>

isRef()

判断是否为 ref

let age = ref(35)
if (isRef(age)) {
}

isReactive()

判断一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

isProxy()

判断一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。

unref()

对 ref 对象解包,是 isRef(val) ? val.value : val 的语法糖

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

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

相关文章

使用groovy+spock优雅的进行单测

使用groovyspock优雅的进行单测 1. groovyspock示例1.1 简单示例1.2 增加where块的示例1.3 实际应用的示例 2. 单测相关问题2.1 与SpringBoot融合2.2 单测数据与测试数据隔离2.3 SQL自动转换&#xff08;MySQL -> H2&#xff09; 参考 Groovy是一种基于JVM的动态语言&#x…

linuxwindowns文件共享之samba

samba 我们所了解过的 FTP 文件传输&#xff0c;的确可以让不同主机之间进行文件传输&#xff0c;此方式特点是&#xff0c;传输文件&#xff0c;用户想要在客户端直接修改服务器的数据&#xff0c;还是较为麻烦。 既然如此&#xff0c;linux 上有一款应用叫 Samba&#xff0…

Java的逻辑控制和方法的使用介绍

前言 程序的逻辑结构一共有三种&#xff1a;顺序结构、分支结构和循环结构。顺序结构就是按代码的顺序来执行相应的指令。这里主要讲述Java的分支结构和循环结构&#xff0c;由于和C语言是有相似性的&#xff0c;所以这里只会提及不同点和注意要点~~ 注意在C语言中&#xff0c;…

日本软文发稿:成功的关键与应注意之事项

在当今的营销环境中&#xff0c;产品和服务如何被消费者所知&#xff0c;和品牌如何被市场所接受&#xff0c;软文发稿扮演了极其重要的角色。对于希望在日本市场拓展业务的企业来说&#xff0c;了解和熟悉日本的软文发稿尤其关键。 一&#xff0c;优秀的媒体平台 日本拥有众…

docker hub 官网

1. docker官网&#xff1a; Docker: Accelerated Container Application Development 2. hub官网&#xff1a; https://hub.docker.com/search?qnexus 有时候不好找&#xff0c;或者忘了&#xff0c;特此标记&#xff01;

「玻尔曾孙」领衔!超辐射原子,重塑全球精准测时——

超辐射原子能够帮助我们以前所未有的精度测量时间。在哥本哈根大学最近的一项研究中&#xff0c;研究人员开发了一种新的测量时间间隔&#xff08;秒&#xff09;的方法&#xff0c;这种方法克服了目前最先进原子钟面临的一些限制。 这一成就有望在多个领域产生深远影响&#x…

AI智能体的未来:引领科技创新潮流

Agent AI智能体的未来 随着Agent AI智能体的智能化水平不断提高&#xff0c;它们在未来社会中的角色、发展路径以及可能带来的挑战也引起了广泛关注。快来分享一下你的看法吧~ 技术进步与创新 随着科技的发展&#xff0c;新的产业和商业模式不断涌现&#xff0c;创造了新的收…

代码随想录Day 36|Python|Leetcode|01背包问题,你该了解这些! ● 01背包问题,你该了解这些! 滚动数组 ● 416. 分割等和子集

01背包问题&#xff0c;你该了解这些&#xff01; 46. 携带研究材料&#xff08;第六期模拟笔试&#xff09; (kamacoder.com) 代码随想录 (programmercarl.com) 确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a;dp[i][j] 表示从下标为[0-i]的物品里…

JAVA 每日面试题(二)

Java 高级面试问题及答案 1. 什么是Java内存模型&#xff08;JMM&#xff09;&#xff1f;它在多线程编程中扮演什么角色&#xff1f; 答案&#xff1a; Java内存模型&#xff08;JMM&#xff09;是一个抽象的概念&#xff0c;它定义了Java程序在执行时&#xff0c;变量的访问…

「笔试刷题」:求最小公倍数

一、题目 输入描述&#xff1a; 输入两个正整数A和B。 输出描述&#xff1a; 输出A和B的最小公倍数。 示例1 输入&#xff1a; 5 7 输出&#xff1a; 35 示例2 输入&#xff1a; 2 4输出&#xff1a; 4二、思路解析 这道题&#xff0c;也是模拟实现这一大类的一题…

Unity 递归实现数字不重复的排列组合

实现 private void Permutation(List<int> num, int leftIndex, List<string> strs) {if (leftIndex < num.Count){for (int rightIndex leftIndex; rightIndex < num.Count; rightIndex){Swap(num, leftIndex, rightIndex);Permutation(num, leftIndex 1…

MySQL基础学习(待整理)

MySQL 简介 学习路径 MySQL 安装 卸载预安装的mariadb rpm -qa | grep mariadb rpm -e --nodeps mariadb-libs安装网络工具 yum -y install net-tools yum -y install libaio下载rpm-bundle.tar安装包&#xff0c;并解压&#xff0c;使用rpm进行安装 rpm -ivh \ mysql-communi…

用Python将Word文件另存为任意支持的格式

原理是利用win32com接口直接调用office API&#xff0c;好处是简单、兼容性好&#xff0c;只要office能处理的&#xff0c;python都可以处理&#xff0c;处理出来的结果和office word里面“另存为”一致。 from win32com import client as wc word wc.Dispatch(Word.Applica…

Meta的AI潮流:创新还是用户体验的噩梦?

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

一、交换网络基础

目录 1.交换机的转发行为 2.数据帧的类型 3.ARP地址解析步骤 Hub&#xff1a;物理层设备 交换机&#xff1a;数据链路层设备 1.交换机的转发行为 泛洪&#xff08;Flooding&#xff09;&#xff08;有可能是单播帧&#xff08;未知单播帧&#xff09;&#xff0c;也有可能是…

【算法一则】【动态规划】求二维数组可组成的最大正方形

题目 在一个由 ‘0’ 和 ‘1’ 组成的二维矩阵内&#xff0c;找到只包含 ‘1’ 的最大正方形&#xff0c;并返回其面积。 示例 1&#xff1a; 输入&#xff1a;matrix [["1","0","1","0","0"],["1","0&…

AutoMQ 系统测试体系揭秘

01 前言 Apache Kafka 有着比较完备的自测体系。除了常规的单元测试和集成测试以外&#xff0c;Apache Kafka 还有着 1000 的“系统集成和性能测试”&#xff08;以下简称系统测试&#xff09;。系统测试会拉起一套真实的 Kafka 集群&#xff0c;并模拟用户使用 Kafka 集群的方…

JAVA 中间件之 Mycat2

Mycat2应用与实战教程 1.Mycat2概述 1.1 什么是MyCat 官网&#xff1a; http://mycatone.top/ Mycat 是基于 java 语言编写的数据库中间件&#xff0c;是一个实现了 MySQL 协议的服务器&#xff0c;前端用户可以把它看作是一个数据库代理&#xff0c;用 MySQL 客户端工具和…

Anaconda代替品,无痛迁移环境,亲测好用

由于Anaconda向公司商用收费&#xff0c;所以需要找到Anaconda的代替品 Miniforce。 本文亲测anaconda虚拟环境到Miniforge的转化&#xff0c; 无痛&#xff0c;省事。 一、介绍Miniforge miniforge集成了Anaconda的核心工具&#xff1a;conda。conda是一个包和环境管理工具。…

HEVC/H.265视频编解码学习笔记–框架及块划分关系

前言 由于本人在学习视频的过程中&#xff0c;觉得分块单元太多搞不清楚其关系&#xff0c;因此本文着重记录这些分块单元的概念以及关联。 一、框架 视频为一帧一帧的图像&#xff0c;其编码的主要核心是压缩空间以及时间上的冗余。因此&#xff0c;视频编码有帧内预测和帧间…