如果我们在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 则是需要我们传入我们传入属性的名称,从而获取到对应属性的响应式对象。