vue3-02声明响应式状态ref()

一、使用

组合式 API 中,推荐使用 ref() 函数来声明响应式状态,例如

javascript 复制代码
import { ref } from 'vue'
const count = ref(0)

注意点1:若想获取ref定义的参数,必须获取参数的value值,

比如:

javascript 复制代码
console.log('count', count) // 打印的是{ value: 0 }
console.log('count.value', count.value) // 打印的是0

注意点2:注意,在模板中使用 ref 时,我们不需要附加 .value,

当在模板中使用时,ref 会自动解包 (有一些注意事项),可以直接在事件监听器中改变一个 ref,例如

javascript 复制代码
 <button @click="count++">
    {{ count }}
  </button>

1、ref 自动解包 (注意事项)

在模板渲染上下文中,只有顶级的 ref 属性才会被解包。

在下面的例子中,count 和 object 是顶级属性,但 object.id 不是:

javascript 复制代码
const count = ref(0)
const object = { id: ref(1) }

因此,

javascript 复制代码
{{ count + 1 }} // 预期工作-得到的结果是1
{{ object.id + 1 }} // 不会预期工作 -- 得到的结果是[object Object]1

因为在计算表达式时 object.id 没有被解包,仍然是一个 ref 对象。为了解决这个问题,我们可以将 id 解构为一个顶级属性

javascript 复制代码
const { id } = object
{{ id + 1 }}// 预期工作,结果是2

另一个需要注意的点是,如果 ref 是文本插值的最终计算值 (即 {{ }} 标签),那么它将被解包,因此以下内容将渲染为 1

javascript 复制代码
{{ object.id }}
// 该特性仅仅是文本插值的一个便利特性,等价于 {{ object.id.value }}。

2、深层响应性

Ref 可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构,比如 Map。

Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时,变化也会被检测到:

javascript 复制代码
import { ref } from 'vue'

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

非原始值将通过 reactive() 转换为响应式代理,

3、练习所有代码

javascript 复制代码
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
// ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回:
// 若想获取ref定义的参数,必须获取参数的value值
console.log('count', count)
console.log('count.value', count.value)
// 深层响应性
const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})
function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}
</script>

<template>
  <!-- 响应式基础 -->
  <div>页面home</div>
  <!-- 在模板中使用 ref 时,我们不需要附加 .value。 -->
  <!-- 为了方便起见,当在模板中使用时,ref 会自动解包 -->
  <!-- 注意事项:在模板渲染上下文中,只有顶级的 ref 属性才会被解包。 -->
  <button @click="count++">
    {{ count }}
  </button>
  <span>{{ obj.nested.count }}</span>
  <span>{{ obj.arr }}</span>
  <button @click="mutateDeeply">测试深层响应式</button>
</template>
相关推荐
热爱编程的小曾10 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin22 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox35 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952739 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员