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

一、使用

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

import { ref } from 'vue' const count = ref(0) 

注意点1：若想获取ref定义的参数，必须获取参数的value值，
比如：

console.log('count', count) // 打印的是{ value: 0 } console.log('count.value', count.value) // 打印的是0 

注意点2：注意，在模板中使用 ref 时，我们不需要附加 .value，
当在模板中使用时，ref 会自动解包 (有一些注意事项)，可以直接在事件监听器中改变一个 ref，例如

 <button @click="count++">     {{ count }}   </button> 

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

在模板渲染上下文中，只有顶级的 ref 属性才会被解包。
在下面的例子中，count 和 object 是顶级属性，但 object.id 不是：

const count = ref(0) const object = { id: ref(1) } 

因此，

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

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

const { id } = object {{ id + 1 }}// 预期工作，结果是2 

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

{{ object.id }} // 该特性仅仅是文本插值的一个便利特性，等价于 {{ object.id.value }}。 

2、深层响应性

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

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

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、练习所有代码

<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>