Vue3的CompositionAPI 创建响应式对象的方式: ref reactive toRef toRefs
ref 和reactive 实际使用中比较常见;
toRef
- 针对一个响应式对象(reactive 封装)的 prop(属性)创建一个ref,且保持响应式
- 两者 保持引用关系
<template>
<h2>
reactive-name: {{ info.name }}
</h2>
<h2>
toRef-name: {{ copyName }}
</h2>
<button @click="onChange">更换问候语</button>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
setup() {
let info = reactive({
name: '姓名',
age: '老年人'
})
// 复制 info 里的 name 属性
let copyName = toRef(info, 'name')
// 更改 rGreet
const onChange = () => {
copyName.value = '新姓名!'
}
return {
info,
copyName,
onChange
}
}
}
</script>
toRefs
toRefs
是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法- 将响应式对象(reactive封装)转成普通对象
- 对象的每个属性(Prop)都是对应的ref
- 两者保持引用关系
- 基础类型值(
String
,Number
,Boolean
,Symbol
) 或单值对象(类似{ count: 1 }
这样只有一个属性值的对象) 使用ref
- 引用类型值(
Object
、Array
)使用reactive
const state = reactive({
obj1:{key:"你好"},
obj2:{key:"麦积山"}
});
return {...state}; // 这种方式将丢失响应式,是一种错误的方式
return toRefs(state); // works
const state = reactive({
obj1:{key:"你好"},
obj2:{key:"麦积山"}
});
const (obj1,obj2) = toRefs(state)
注意reactive封装的响应式对象,不要通过解构的方式return,这是不具有响应式的。可以通过 toRefs 处理,然后再解构返回,这样才具有响应式
总结
toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref,而且它既保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,如果你知道 浅拷贝 的话那么这个引用就很好理解了,它复制的其实就是引用 + 响应式; ref 不加 s 和 加 s 的区别就是这样:toRef: 复制 reactive 里的单个属性并转成; reftoRefs: 复制 reactive 里的所有属性并转成 ref