参数区别
toRef() 接收两个参数,第一个参数是一个对象, 第二个参数是个字符串(其第一个参数的key)。
toRefs() 接收一个参数, 参数为对象。
共同点
接收的对象都是响应式对象, 也就是经过 reactive() 的对象。
ps:如果不是一个响应式对象那么返回值也无法响应化。
不同点
toRef() 返回值是一个ObjectRefImpl
对象。
toRefs() 返回值是一个对象,对象的每个key的值是ObjectRefImpl
对象。
相当于把对象的值设置为 toRef() 后的对象。如下:
let json = {
name: 'this name'
}
let tore = toRef(json, 'name')
let test = {
name: tore // 重点!!!
}
使用时取值方式不一样:
toRef() 经过setup return后,会自动浅解包。
toRefs() 经过setup return后,不会自动浅解包。
<div>
<button @click="cqfn"> click me</button>
<p>{{q}}</p> <!-- toRef() -->
<p>{{cq.name.value}}</p> <!-- toRefs() -->
</div>
测试代码:
<template>
<button @click="cqfn"> click me</button>
<p>{{q}}</p> <!-- toRef() -->
<p>{{cq.name.value}}</p> <!-- toRefs() -->
</template>
<script>
import { reactive, toRef, ref, toRefs } from "vue";
export default {
name: "HelloWorld",
setup(props) {
let m = {
name: 'cyq'
}
let mm = {
name: 'cyssq',
age: 22
}
let myjson = reactive(m)
let myjson1 = reactive(mm)
// console.log(myjson);
let q = toRef(myjson, 'name')
console.log(q);
// console.log(q.value);
let cq = toRefs(myjson1) // 参数给一个普通对象无法实现可视化
console.log(cq);
// console.log(cq.name.value);
let cqfn =()=>{
q.value = 'q name'
setTimeout(e => {
myjson.name = 'vvvvvvvvvv'
}, 1000)
cq.name.value = 'cq name'
setTimeout(e => {
myjson1.name = 'bbbbbbbbbbbb'
console.log(cq.name.value); // bbbbbbbbbbbb
}, 1000)
}
return {
cq,
q,
cqfn
};
}
};
</script>