Vue - 解构赋值可能导致响应式丢失，toRef 用于维持响应式

在前端开发中，Vue 是一种流行的JavaScript框架，提供了响应式数据绑定和组件化的能力。Vue 的响应式系统允许开发者在数据变化时自动更新相关的视图，从而提供了更好的开发体验和性能优化。然而，在使用 Vue 的过程中，我们需要注意一些细节，特别是在处理数据解构赋值时可能会导致响应式丢失的问题。

解构赋值可能导致响应式丢失的问题

解构赋值是一种方便的语法，用于从对象或数组中提取值，并将它们赋给对应的变量。然而，当我们对 Vue 的响应式对象进行解构赋值时，可能会导致响应式丢失的问题。这是因为解构赋值实际上是创建了一个新的变量，而不是引用原始的响应式对象。

让我们看一个简单的例子来说明这个问题：

<template>
  <div>
    <p>{