Vue3组合式API中onMounted阶段修改数据遇问题求助

这跟组件挂载阶段能不能修改数据没关系，问题出在异步请求的执行顺序上：

你写的axios.get是异步操作，发起请求后代码会继续往下走，不会等服务器返回数据。所以当你执行if (Task.value['description'] === '')这行代码时，Task.value = res.data还没执行，Task还是初始的空数组[]，自然访问description会得到undefined。

正确实现方式 #

有两种常用写法：

方法1：把判断逻辑放到请求的then回调里 #

<script setup>
...
const Task = ref({}) // 建议初始化为空对象，接口返回的是单个任务对象而非数组
...
onMounted(() => {
    idTask.value = props.id
    axios
        .get("/tasks/" + idTask.value)
        .then(res => {
            Task.value = res.data
            // 拿到数据后再执行判断修改
            if (Task.value.description === '') {
                Task.value.description = 'Enter task description text'
            }
        })
})
..

方法2：用async/await让异步代码按顺序执行 #

<script setup>
...
const Task = ref({})
...
onMounted(async () => { // 添加async标记
    idTask.value = props.id
    const res = await axios.get("/tasks/" + idTask.value) // await等待请求完成
    Task.value = res.data
    if (Task.value.description === '') {
        Task.value.description = 'Enter task description text'
    }
})
..

额外提醒：你一开始将Task初始化为数组类型ref([])，但接口返回的是单个任务对象，建议改成ref({})，避免后续出现类型不匹配的问题。

内容的提问来源于stack exchange，提问作者Валерий Климов