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

发表评论

邮箱地址不会被公开。 必填项已用*标注