VueJS技术问询：能否在computed中动态声明及如何声明message01等属性？

Hey there! Let's tackle your two questions about Vue's computed properties—super common scenarios when you need dynamic logic in your components.

Absolutely! You can dynamically generate computed properties, though the implementation differs slightly between Vue 2 and Vue 3. The core idea is to either return an object with dynamic keys from a computed property (works for both versions) or populate a reactive object with individual computed properties (Vue 3 only).

Let's walk through practical examples for both Vue versions to make this concrete.

Vue 2 (Options API) #

In Vue 2's Options API, you'll define a computed property that builds and returns an object with your messageXX keys. Here's a working example:

<template>
  <div>
    <div v-for="(message, key) in dynamicMessages" :key="key">
      {{ key }}: {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalMessages: 5, // Adjust this to control how many messages you generate
      baseMessageText: "Dynamic computed message #"
    };
  },
  computed: {
    dynamicMessages() {
      const messages = {};
      for (let i = 1; i <= this.totalMessages; i++) {
        // Generate keys like message01, message02 (padStart ensures 2-digit numbering)
        const key = `message${i.toString().padStart(2, "0")}`;
        messages[key] = `${this.baseMessageText}${i}`;
      }
      return messages;
    }
  }
};
</script>

What's happening here? #

We loop from 1 to totalMessages, build each messageXX key, and assign a value that combines our base text with the index. The dynamicMessages computed property returns this full object, which we can loop through in the template to render each message.

Vue 3 (Composition API) #

Vue 3 gives you two flexible ways to handle this:

Option 1: Reactive object with individual computed properties #

If you want each messageXX to be its own reactive computed property (so updates are isolated), use reactive to create an object and populate it dynamically:

<template>
  <div>
    <div v-for="(message, key) in dynamicMessages" :key="key">
      {{ key }}: {{ message }}
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from "vue";

const totalMessages = 5;
const baseMessageText = "Dynamic computed message #";

// Create a reactive object to hold our computed messages
const dynamicMessages = reactive({});

// Populate the object with computed properties
for (let i = 1; i <= totalMessages; i++) {
  const key = `message${i.toString().padStart(2, "0")}`;
  dynamicMessages[key] = computed(() => `${baseMessageText}${i}`);
}
</script>

Option 2: Computed object (mirrors Vue 2 approach) #

If you don't need individual reactivity for each message, you can return a computed object directly—this is simpler and works great for most cases:

<template>
  <div>
    <div v-for="(message, key) in dynamicMessages" :key="key">
      {{ key }}: {{ message }}
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const totalMessages = 5;
const baseMessageText = "Dynamic computed message #";

const dynamicMessages = computed(() => {
  const messages = {};
  for (let i = 1; i <= totalMessages; i++) {
    const key = `message${i.toString().padStart(2, "0")}`;
    messages[key] = `${baseMessageText}${i}`;
  }
  return messages;
});
</script>

Which Vue 3 option should I use? #

• Use Option 1 if you need to reference or modify individual messageXX properties independently (each is a separate computed value).
• Use Option 2 for a simpler setup where the entire set of messages can recompute together when dependencies change.

内容的提问来源于stack exchange，提问作者DevonDahon