用 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