toRefs学习

toRefs : 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 <a href="https://link.zhihu.com/?target=https%3A//cn.vuejs.org/api/reactivity-utilities.html%23toref" class=" wrap external" target="_blank" rel="nofollow noreferrer" data-za-detail-view-id="1043">toRef()</a>创建的。通俗来说，就是复制 reactive 里的所有属性并转成 ref，改变某属性的值将更新对应ref的值，反之，改变复制后的ref的值，对应的reactive里的属性的值也会改变；

toRef : 基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。通俗来说，就是复制 reactive 里的单个属性并转成 ref，改变该属性的值将更新ref的值，反之，改变复制后的ref的值，对应的reactive里的属性的值也会改变，类似浅拷贝；

总结 ：toRef复制的是reactive 里的单个属性，而toRefs复制的是reactive 里的所有属性。

1、toRefs 解构 ref对象

<template>
	<div>
		<p>{{ obj }}</p>
		<p>{{ a }}---{{ b }}</p>
		<button @click="changeobj">changeobj</button>
		<button @click="lookobj">lookobj</button>
	</div>
</template>

<script setup>
import { ref, toRefs } from "vue";

const obj = ref({ a: 10, b: 20 });
const { a, b } = toRefs(obj.value);

function changeobj() {
	a.value++;
	b.value++;
}

function lookobj() {
	console.log(a.value, obj.value.a);
}
</script>

2、toRefs 解构reactive

<template>
  name: {{ name }} <!-- 页面会更新 -->
  age: {{ age }}
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";

let state = reactive({
  name: 'zly',
  age: 47
})

const { name, age } = toRefs(state);
//const {name,age} = state;


setInterval(() => {
  state.name += '--'
}, 1000)


</script>

3、toRef使用方式：

<template>
	<div>
		<p>{{ obj }}</p>
		<p>{{ b }}</p>
		<button @click="changeref">changeref</button>
		<button @click="changeobj">changeobj</button>
	</div>
</template>

<script setup>
import { reactive, toRef } from "vue";

const obj = reactive({
	a: 1,
	b: 2
})
// 复制 reactive 里的单个属性，转成 ref
const b = toRef(obj, 'b')

// 1、更改该 ref 会更新源属性
function changeref() {
	b.value++
}

console.log(obj.b) // 2
console.log(b.value) // 2


// 2、更改源属性也会更新该 ref
function changeobj() {
	obj.b++
}

console.log(obj.b) // 3
console.log(b.value) // 3
</script>