响应性丟失

# 题目:

首先我们看到这里题目的描述，解构赋值在我们写代码的过程中确实会经常用到，但是当我们去解构一个响应式的对象里的属性的时候，却会出现丢失响应式的现象。怎么解决这个问题呢？

# 分析:

toRefs 来到 vue 官网，看 toRefs 这个 api 的说明，当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，组件可以解构/展开返回的对象而不会失去响应性。

# 解决:

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

function useCount() {
  const state = reactive({
    count: 0,
  })

  function update(value: number) {
    state.count = value
  }

  return {
    ...toRefs(state),
    update,
  }
}

// Ensure the destructured properties don't lose their reactivity
const { count, update } = useCount()

</script>

<template>
  <div>
    <p>
      <span @click="update(count-1)">-</span>
      {{ count }}
      <span @click="update(count+1)">+</span>
    </p>
  </div>
</template>

那么这里我们是不是就可以用 toRefs 来给这个函数中返回的对象包一层，致使它不会丢掉响应式达到我们的目的。

← 阻止事件冒泡大写→