X
XiaoSong
V1
2023/01/17阅读:11主题:默认主题
响应式2(ref)
用 ref() 定义响应式变量
上一讲中,我们使用
reactive()
定义响应式变量,但是存在一些问题,ref()
可以很好的解决这些问题。
基本使用
ref()
的参数可以是任意类型的值
<script setup>
import {ref} from 'vue'
// 定义响应式变量
const number = ref(0)
// 输出一个带value属性的对象
console.log(number) // {value: 0}
console.log(number.value) // 0
</script>
ref()
在模板中自动解包
当
ref
在模板中作为顶层属性被访问时,它们会被自动“解包”,所以不需要使用.value
:
<template>
<div>
<!-- 直接显示 `0`,无需 `.value` -->
{{ number }}
</div>
</template>
ref()在响应式对象中的解包
当一个
ref
被嵌套在一个响应式对象中,作为属性被访问或更改时,它会自动解包,不需要使用.value
:
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
作者介绍
X
XiaoSong
V1