ref 解包细节

作为 reactive 对象的属性

一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说,它的行为就像一个普通的属性:

复制代码
const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 0

state.count = 1
console.log(count.value) // 1

如果将一个新的 ref 赋值给一个关联了已有 ref 的属性,那么它会替换掉旧的 ref:

复制代码
const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value) // 1

只有当嵌套在一个深层响应式对象内时,才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。

数组和集合的注意事项

与 reactive 对象不同的是,当 ref 作为响应式数组或原生集合类型 (如 Map) 中的元素被访问时,它不会被解包:

javascript 复制代码
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)

在模板中解包的注意事项

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

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

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

因此,这个表达式按预期工作:

javascript 复制代码
{{ count + 1 }}

...但这个不会

javascript 复制代码
{{ 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 }}

相关推荐
FanetheDivine2 分钟前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js
前端Hardy3 分钟前
HTML&CSS:超好看的轮播图,你绝对用得上(建议收藏)
javascript·css·html
傻球6 分钟前
Jotai 使用详解:React 轻量级状态管理库
前端·react.js
Linhieng7 分钟前
JS 解析 png 图片的分辨率(宽高)
javascript
Json_8 分钟前
Vue 构造器 Vue.extend
前端·vue.js·深度学习
伶俜monster8 分钟前
UV 法向量实验室:Threejs 纹理与光照炼金术
前端·webgl·three.js
小old弟9 分钟前
老生常谈: 谈谈对vue的理解?vue3有而vue2没有的东西或者说特性?
前端·vue.js
前端Hardy9 分钟前
HTML&CSS:必学!手把手教你实现动态天气图标
javascript·css·html
蔓越莓11 分钟前
[Electron] win.setSize 在RTL布局下的表现,是否需要适配?
前端·electron
Json_16 分钟前
Vue 实例方法
前端·vue.js·深度学习