Vue 3 组合 API 数据不是反应式的

Question

我有一个简单的应用程序，其中有一个用于添加任务的组件以及我想要显示所有添加的任务的主页。问题是当我添加一个新任务时，它不会显示在我渲染所有任务的模板中。我想重新使用我的 AddTasks 组件和 useTasks 组合函数来添加任务。但是它们没有出现在主页上。我做错了什么？

这里是克隆和尝试的 repo：

$ git clone https://github.com/martinszeltins/vue3-reactivity.git
$ cd vue3-reactivity
$ npm install
$ npm run serve

这是我的 App.vue

<template>
    <div v-for="task in tasks">
        {{ task }}
    </div>

    <add-task />
</template>

<script>
    import AddTask from './components/AddTask.vue'
    import useTasks from './composition/useTasks.js'

    export default {
        components: {
            AddTask
        },

        setup() {
            const { tasks } = useTasks()

            return { tasks }
        },
    }
</script>

这里是 AddTask 组件

<template>
    <button @click="addTask">
        Add new task
    </button>
</template>

<script>
    import useTasks from '../composition/useTasks.js'

    export default {
        setup()
        {
            const { add } = useTasks()

            function addTask() {
                add('My new task')
            }

            return { addTask }
        }
    }
</script>

以及useTasks组合函数

import { ref } from 'vue'

export default function useTasks() {
    const tasks = ref(['First task'])

    function add(task) {
        alert(`Adding task - ${task}`)
        tasks.value.push(task)
    }

    return { tasks, add }
}

Answer 1

这是因为每次函数运行时你的数组都会被重置。

将它移到函数之外，它应该可以工作：

import { ref } from 'vue';

const tasks = ref(['First task']);

export default function useTasks() {
    function add(task) {
        alert(`Adding task - ${task}`);
        tasks.value.push(task);
    }

    return { tasks, add };
}