vue3 props torefs

在Vue 3中，可以使用`toRefs`函数将`props`转换为响应式的`ref`。这样做可以实现在组件内部直接修改`props`的值并触发响应式更新。

下面是一个示例：

<template>
  <div>
    <p>Parent Component: {{ message }}</p>
    <ChildComponent :message="message" />
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref, toRefs } from 'vue';

const ChildComponent = {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const { message } = toRefs(props);
    // 将props转换为ref
    // message本身是响应式的
    // 此时可以直接修改message的值并触发更新
    return { message };
  },
  template: '<p>Child Component: {{ message }}</p>'
};

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello Vue 3!');
    
    const updateMessage = () => {
      message.value = 'Updated Message!';
    };
    
    return {
      message,
      updateMessage
    };
  }
};
</script>

在上面的示例中，通过`toRefs`将`props.message`转换为响应式的`ref`，然后在子组件中直接使用这个`message`即可。