vue3 如何解构props还能响应式

在 Vue 3.5 及其更新版本中，确实引入了一些改进，使得解构 props 并保持响应性变得更加简单。具体来说，Vue 3.5 引入了对 setup 函数中的 props 解构的原生支持，通过编译时优化确保解构后的变量仍然是响应式的。

Vue 3.5 中直接解构 props

在 Vue 3.5 及以上版本中，你可以直接在 setup 函数中解构 props，并且这些解构出来的变量仍然会保持响应性。这是通过编译器自动处理的，不需要额外调用 toRefs 或其他工具函数。

示例代码

import { defineComponent, computed } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  setup({ message, count }) { // 直接解构 props
    console.log(message); // 响应式引用
    console.log(count);   // 响应式引用

    // 使用 computed 创建一个新的响应式值
    const upperCaseMessage = computed(() => message.toUpperCase());
    const doubleCount = computed(() => count * 2);

    return {
      message,
      count,
      upperCaseMessage,
      doubleCount
    };
  }
});

注意事项

尽管 Vue 3.5 支持直接解构 props 并保持响应性，但需要注意以下几点：

1. 编译器支持：这种特性依赖于编译器的支持。确保你使用的是最新版本的 Vue CLI 或 Vite 等构建工具，并且它们能够正确地编译你的代码。

2. .value 不再需要：与 toRefs 不同，直接解构 props 后的变量是响应式的，不需要使用 .value 来访问它们的值。

3. 模板中的使用：如果你在模板中使用这些解构出来的变量，它们仍然是响应式的。

完整示例

下面是一个完整的示例，展示了如何在 Vue 3.5 中直接解构 props 并保持响应性：

<template>
  <div>
    <p>Original Message: {{ message }}</p>
    <p>Upper Case Message: {{ upperCaseMessage }}</p>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="updateProps">Update Props</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, toRefs } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  emits: ['update:message', 'update:count'],
  setup({ message, count }, { emit }) { // 直接解构 props
    // 使用 computed 创建一个新的响应式值
    const upperCaseMessage = computed(() => message.toUpperCase());
    const doubleCount = computed(() => count * 2);

    // 更新 props 的示例方法
    const updateProps = () => {
      emit('update:message', 'New Message');
      emit('update:count', count + 1);
    };

    return {
      message,
      count,
      upperCaseMessage,
      doubleCount,
      updateProps
    };
  }
});
</script>

对比旧方法

为了更好地理解新特性的优势，我们对比一下旧方法和新方法：

旧方法（使用 toRefs）

import { defineComponent, toRefs, computed } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const { message, count } = toRefs(props);

    const upperCaseMessage = computed(() => message.value.toUpperCase());
    const doubleCount = computed(() => count.value * 2);

    return {
      message,
      count,
      upperCaseMessage,
      doubleCount
    };
  }
});

新方法（直接解构 props）

import { defineComponent, computed } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  setup({ message, count }) {
    const upperCaseMessage = computed(() => message.toUpperCase());
    const doubleCount = computed(() => count * 2);

    return {
      message,
      count,
      upperCaseMessage,
      doubleCount
    };
  }
});

总结

• Vue 3.5 及以上版本：可以直接在 setup 函数中解构 props，并且这些解构出来的变量仍然是响应式的。
• 无需手动调用 toRefs：编译器会在编译时处理响应性，确保解构后的变量保持响应性。
• 简化代码：减少了样板代码，使代码更加简洁和易读。

通过这种方式，你可以更方便地解构 props 并保持其响应性，从而提高开发效率和代码的可维护性。