vue3中toRefs、toRef用法

一、toRefs

1.接收一个reactive 定义的对象，直接对这个对接结构，丢失响应式

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ state.message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { reactive, toRefs, toRef,ref } from 'vue'
const state = reactive({
  count: 0,
  message: 'Hello Vue 3'
})
let {count} = state
function increment() {
  count++ // 不会触发视图更新
}
</script>

后边的代码都基上边这个模板

let {count} = toRefs(state)
function increment() {
  count.value++ // 触发更新
}

2.解构模板中使用对象属性

当我们把对象中的属性解构，在视图中我们可以直接使用该属性，简化化 state.count 操作

<script setup>
let {count} = toRefs(state)
</script>

<template>
    <p>Count: {{ count }}</p>
</template>

二、toRef解构对象中的某一个属性

具体写法

<script setup>
let count = toRef(state,'count')
function increment() {
  count.value++ // 触发更新
}
</script>

总结

1.使用 toRef 或 toRefs 解构响应式对象时，可以保持响应式
2.ref、reactive 直接解构时，都会丢失响应式