如果我们在setup中设置一个值，在接下来进行修改的话，是不会影响到template模板中渲染的样式。
那么在Vue3之中，如果我们想要讲一个值，或者一个对象，当作一个响应式的对象，应该怎么办？
在Vue3之中，需要使用ref来进行包裹创建
import {ref} from ‘vue’ 首先进行引入ref
我们定义一个变量
let xxx = ref(“初始值”)
这样会被包裹为一个RefImpl的实例对象，ref对象的value就是可以支持响应式操作的
那么在此中，使用方式就是
在模板之中，使用方式就是直接 xxx,{{xxx}}
在方法之中，则修改的值使用方式，则应该是 xxx.value
<template>
<div class=”person”>
<h2>{{name}}</h2>
</div>
</template>
<script setup lang=”ts” name=”Person”>
import {ref} from ‘vue’
let name = ref(‘hello’)
function changeName(){
name.value = ‘no hello’
}
</scirpt>
除此外，vue为了针对对象类型的数据，提供了特殊的函数，来创建响应式数据
其中利用reactive包裹的，就是对象类型的响应式数据
基本语法是 let 响应式对象 = reactive(原对象)
| <template>
<div class=”person”> <h2>测试：{{obj.a.b.c.d}}</h2> </div> </template> <script lang=”ts” setup name=”Person”> import { reactive } from ‘vue’ // 数据 let obj = reactive({ a:{ b:{ c:{ d:666 } } } }) function test(){ obj.a.b.c.d = 999 } </script> |
ref可以用来创建对象类型的数据，但是reactive不能用来创建基本类型的数据
而ref在实际创建的时候，是调用了reactive函数，所以需要使用.value来访问到
我们对比下ref和reactive
ref 可以用来定义基本类型数据和对象类型数据
reactive 可以用来定义 对象类型数据
ref 在访问的时候必须要加上.value 当然可以用volar 插件自动补完.value
其次是在我们尝试整体替换对象的时候
对于不同函数包裹的对象，替换方式是不一样的
对于reactive定义的对象，当我们尝试替换的时候，可以进行每个值的挨个替换
也可以考虑使用Object.assign 来进行整体的替换
对于ref定义的对象，直接使用 xxx.value = {}
总结一下，如果需要一个响应式对象，如果不深，那么使用ref，reactive都可以
如果比较深，那么推荐使用reactive
最后介绍下toRefs和toRef，这是将对象类型的数据中部分属性取出来作为新的对象的方式。
使用方式就是
| // 数据
let person = reactive({name:’张三’, age:18, gender:’男’}) // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力 let {name,gender} = toRefs(person) // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力 let age = toRef(person,’age’) // 方法 function changeName(){ name.value += ‘~’ } function changeAge(){ age.value += 1 } |
toRefs会返回一个类似元祖的信息
toRef 则是需要我们传入我们传入属性的名称，从而获取到对应属性的响应式对象。