Vue.js 3 组合 API 与选项 API

Question

有人可以解释为什么这不适用于脚本设置，但没有它可以工作。
在模板中，我使用v-for迭代字符串[]：

<div v-for="lang in data.translatedLanguages" class="translationTableBodyRow">
      <div class="translationTableBodyCell">xx</div>
      <div class="translationTableBodyCell">{{ lang }}</div>
      <div class="translationTableBodyCell">10 %</div>
      <div class="translationTableBodyCell">Edit</div>
</div>

代码<script lang="ts">：
工作，v-for找到元素，我看到行。

<script  lang="ts">
import axios, {isCancel, AxiosError} from 'axios';
import { defineComponent } from 'vue'

export default defineComponent({
    data() {
        return {
            data: { translatedLanguages: [] }
        }
    },
    mounted() {
        axios.get("https://translation.colreminder.com/test/data.php?request=langTranslated").then(response => {
            console.log(response.request.response);
            this.data = JSON.parse(response.request.response)
            this.data.translatedLanguages
            console.log(this.data.translatedLanguages);
        });
    }
});
</script>

脚本<script setup lang="ts">：
不工作，我没有看到任何行，因为v-for似乎找不到元素，但数据对象不为空。

<script lang="ts">
import axios, {isCancel, AxiosError} from 'axios';
import { onMounted, reactive, VueElement } from 'vue';
import type { LanguagesTranslated } from './main';

var data: LanguagesTranslated = { translatedLanguages: [] };

onMounted(() => {
    axios.get("https://translation.colreminder.com/test/data.php?request=langTranslated").then(response => {
        console.log(response.request.response);
        data = JSON.parse(response.request.response);
        console.log(data.translatedLanguages);
    });
});
</script>

LanguagesTranslated 是这个接口：

export interface LanguagesTranslated {
    translatedLanguages: string[];
}

Answer 1

您的第一个示例是使用选项 API。使用选项 API 时，返回的对象中的属性data()会自动变为响应式。

函数setup()和<script setup>是使用 Composition API 的两种方式。使用 Composition API 时，您的行为更像普通的 JavaScript。要创建响应式变量，您必须使用响应式 API 函数之一显式创建它：ref()、reactive()或computed()。

由于您的示例<script setup>是创建一个普通变量，因此它不是反应性的，并且v-for当您重新分配它时不会重新评估。

尝试这个：

<script setup lang="ts">
import axios, { isCancel, AxiosError } from 'axios';
import { ref, onMounted } from 'vue';
import type { LanguagesTranslated } from './main';

// Use `ref` here to create a Ref.
const data = ref<LanguagesTranslated>({ translatedLanguages: [] });

onMounted(() => {
    axios
        .get("https://translation.colreminder.com/test/data.php?request=langTranslated")
        .then(response => {
            console.log(response.request.response);
            // Use `data.value`, as `data` is a Ref.
            data.value = JSON.parse(response.request.response);
            console.log(data.value.translatedLanguages);
        });
});
</script>