老师,关于toRef和toRefs
问题描述：
toRef和toRefs新返回的ref引用,
是否会对原始对象中的对应属性保持响应式链接,
测试了下有点类似双向绑定的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const vue = Vue.createApp({
setup() {
const {
reactive,
toRef,
toRefs
} = Vue;
const data = reactive({
a: 1,
b: 2
})
let {
a,
b
} = toRefs(data)
let c = toRef(data, 'c')
data.a++
console.log(a.value) // 2
b.value++
console.log(data.b) // 3
c.value = 123
console.log(data.c) // 123
},
template: `
<div></div>
`
});
const vm = vue.mount('#root')
</script>
</html>
35
收起
正在回答
1回答
同学你好，会的，reactive对象解构后不具有响应式，所以用toRefs()包裹reactive对象，将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref，这样解构后再操作就会对源数据进行修改。
而toRef()也可以用来为源响应式对象上的 property 性创建一个 ref，然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星