Vue3中 toRefs的基本使用

什么是toRefs？

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref；

理解一下：
期望： 页面上展示 “小明=========…”；
实际：页面展示"小明"，myData中name 无法响应。

<template>
	<h3>{
   
   { name }}</h3> <!--通过方式一，无法响应-->
	<!-- <h3>{
    
    { myData.name }}</h3> 通过方式二，可以响应 -->
</template>
<script lang="ts">
const myData = reactive({
      
      
	name: '小明',
	age: 12
})

setInerval(()=>{
      
      
	myData.name += '==='
}, 1000)

return {
      
      
	...myData // 通过方式一，解构的方式无法使其内部形成响应式
	// myData 通过方式二，可以响应
}
</script>

解决： 通过toRefs的方式，将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性；

toRefs:

• 将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象；
• 应用: 当从合成函数返回响应式对象时，toRefs 非常有用；
• 这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

<template>
  <h2>App</h2>
  <h3>foo: {
   
   {foo}}</h3>
  <h3>bar: {
   
   {bar}}</h3>
  <h3>foo2: {
   
   {foo2}}</h3>
  <h3>bar2: {
   
   {bar2}}</h3>


</template>

<script lang="ts">
import {
      
       reactive, toRefs } from 'vue'
/*

*/
export default {
      
      

  setup () {
      
      

    const state = reactive({
      
      
      foo: 'a',
      bar: 'b',
    })

    const stateAsRefs = toRefs(state)

    setTimeout(() => {
      
      
      state.foo += '++'
      state.bar += '++'
    }, 2000);

    const {
      
      foo2, bar2} = useReatureX()

    return {
      
      
      // ...state,
      ...stateAsRefs,
      foo2, 
      bar2
    }
  },
}

function useReatureX() {
      
      
  const state = reactive({
      
      
    foo2: 'a',
    bar2: 'b',
  })

  setTimeout(() => {
      
      
    state.foo2 += '++'
    state.bar2 += '++'
  }, 2000);

  return toRefs(state)
}

</script>