Vue3中 toRefs的基本使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了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:文章来源地址https://www.toymoban.com/news/detail-666212.html

将响应式对象中所有属性包装为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>