前言
ref
是处理基本数据类型响应式API
函数,在setup
中声明定义的变量,可以直接在模板中使用
没有被响应式API
包裹处理的变量数据,是不具备响应式能力的
也就是往往在逻辑中修改了数据,但是页面不会更新,那怎么样将一个非响应式数据变成响应式数据
就需要用到toRef()
与toRefs()
这两个componsition API
的
单纯的去看概念,往往比较抽象,是难以理解的,还是需要从具体的实例出发
01
toRef()函数
作用:创建一个ref
对象,其value
值指向另一个对象中的某个属性值,与原对象是存在关联关系的
也就是基于响应式对象上的一个属性,创建一个对应的ref
,这样创建的ref
与它的源属性是保持同步的,与源对象存在引用关系
改变源属性的值将更新ref
的值
语法: const 变量名 = toRef(源对象,源对象下的某个属性)
如:const name = toRef(person,'name')
应用: 要将响应式对象中的某个属性单独提供给外部使用时,不想丢失响应式,把一个prop
的ref
传递给一个组合式函数也会很有用
缺点:toRef()
只能处理一个属性,但是toRefs(源对象)
却可以一次性批量处理
<script setup>
import { reactive } from "vue";
const person = reactive({
name:"川川",
age: 18,
job: {
web: '前端开发',
trade: '互联网'
}
});
</script>
那在模板当中想要渲染数据可以这么写
{
{person.name}} -{
{person.age}}-{
{person.job.web}}-{
{person.job.trade}}
如果不想在模板当中,写那么长,那么可以先解构,如下所示
<script setup>
import { reactive } from "vue";
const person = reactive({
name:"川川",
age: 18,
job: {
web: '前端开发',
trade: '互联网'
}
});
co