【2024】前端学习笔记19-ref和reactive使用

学习笔记

1.ref

ref是 Vue 3 中用来创建响应式引用的一个函数,通常用于基本数据类型(如字符串、数字、布尔值等)或对象/数组的单一值。

ref特点:

  • ref 可以用来创建单个响应式对象
  • 对于 ref 包裹的值,你需要通过 .value 来访问和修改它的值
  • 在模板中,Vue 会自动解包 ref 对象,所以可以直接使用 count 而不需要 .value

示例:

java 复制代码
// 使用ref创建一个名为name的响应式变量,初始值为yyang
const name = ref('yyang')
// 将这个变量的情况输出在控制台 上
console.log(name)

输出:

其中的value就是变量name的值,如果要想修改值得内容,直接修改是不行得,需要使用以下得方法:

java 复制代码
name.value = 'xxxxx'

输出:

2.reactive

reactive 用于创建一个响应式对象。它是针对复杂对象(如对象、数组、Map、Set 等)设计的。reactive 会自动使整个对象变成响应式。

reactive特点 :

  • reactive 适用于对象或数组(包括嵌套对象和数组),可以让整个对象变为响应式
  • 不需要通过 .value 来访问值,直接使用对象的属性进行操作
  • reactive 返回的是一个代理对象,所有对这个对象的操作都会自动追踪和反应

示例:

java 复制代码
// 使用 reactive 创建了一个包含用户信息(姓名和年龄)的响应式对象 state
const state = reactive({
  user: {
    name: 'yyang',
    age: 18
  }
})
// 通过 console.log 打印出 state.user,即显示 user 对象的内容
console.log("state的信息:", state.user)

输出:

如果需要更新属性,比如更新name为bobo,只需要这样:

java 复制代码
state.user.name = 'bobo';

3.总结

何时使用 ref 或 reactive:

ref 适用于 基本类型 和 需要包装为响应式的单一对象,例如:

  • 用来存储数字、字符串、布尔值等。
  • 如果只是管理一个简单的状态,比如计数器。

reactive 适用于 复杂对象 或 多个相关的属性,例如:

  • 用来存储一个包含多个属性的对象,或者是包含多个元素的数组。
  • 当需要修改和操作复杂数据结构时,reactive 更加方便。

总结:

  • ref 更适合简单的值和对基本数据类型的响应式处理(需要 .value 来访问)。
  • reactive 更适合处理对象和数组等复杂数据结构,可以直接操作对象的属性。
相关推荐
wdfk_prog43 分钟前
[Linux]学习笔记系列 -- [arm][debug]
linux·运维·arm开发·笔记·学习
wdfk_prog2 小时前
实战教程:从“对象文件为空“到仓库重生——修复 Git 仓库损坏全记录
大数据·网络·笔记·git·学习·elasticsearch·全文检索
小杨爱搞嵌入式2 小时前
【STM32】GPIO的输入输出
c语言·笔记·stm32·单片机·学习
杨荧2 小时前
基于大数据的美食视频播放数据可视化系统 Python+Django+Vue.js
大数据·前端·javascript·vue.js·spring boot·后端·python
皮蛋sol周2 小时前
嵌入式学习硬件(一)ARM体系架构
arm开发·学习·架构
cmdyu_2 小时前
如何解决用阿里云效流水线持续集成部署Nuxt静态应用时流程卡住,进行不下去的问题
前端·经验分享·ci/cd
WordPress学习笔记2 小时前
根据浏览器语言判断wordpress访问不同语言的站点
前端·javascript·html
yuanmenglxb20043 小时前
解锁webpack核心技能(二):配置文件和devtool配置指南
前端·webpack·前端工程化
JefferyXZF3 小时前
Next.js 路由导航:四种方式构建流畅的页面跳转(三)
前端·全栈·next.js
古月方源aaaaa3 小时前
ospf笔记
笔记·智能路由器