Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity

在Vue 3中，`<script setup>`是一个新的语法糖，用于在单文件组件中编写组件选项。在`<script setup>`中，可以使用`props`选项来声明组件的属性，并且可以直接在组件模板中使用这些属性。但是需要注意的是，在`<script setup>`的根作用域中获取`props`的值会导致该值失去响应性。这是因为在`<script setup>`中，`props`是通过`with`语句注入到作用域中的，而`with`语句会创建一个新的作用域，从而导致响应式系统无法追踪`props`的变化。

以下是一个演示代码，其中在`<script setup>`的根作用域中获取`props`的值会导致该值失去响应性：

<template>
  <div>{{ count }}</div>
</template>

<script setup>
  // 在根作用域中获取 props 的值
  const count = props.count

  // 点击按钮时修改 count 的值
  const handleClick = () => {
    count.value++
  }
</script>

在上面的代码中，`count`的值是从`props`中获取的，但是由于在根作用域中获取了`props`的值，所以`count`失去了响应性。如果要保持`count`的响应性，可以使用`toRefs`函数将`props`转换为响应式对象，然后再获取`count`的值：

<template>
  <div>{{ count }}</div>
  <button @click="handleClick">Increment</button>
</template>

<script setup>
  import { toRefs } from 'vue'

  // 将 props 转换为响应式对象
  const { count } = toRefs(props)

  // 点击按钮时修改 count 的值
  const handleClick = () => {
    count.value++
  }
</script>