Vue组合式API watch异步等待传过滤后props.students

现有代码为同步执行逻辑：Inertia.get属于异步请求，发起后不会阻塞后续代码运行，请求未返回、后端返回的新筛选数据未同步到props.students时，alphaLinks(props.students)就已经执行，传入的自然是过滤前的旧值。

方案1：单独监听props.students触发逻辑（推荐） #

将数据请求逻辑和数据处理逻辑解耦，原筛选参数的watch只负责发起Inertia请求，单独新增对props.students的监听，只要students值更新（不管是Inertia请求触发还是其他逻辑修改），就自动执行alphaLinks，完全不需要手动处理异步请求等待逻辑：

// 筛选参数变化时仅发起数据请求
watch( [search, serviceDate, currentGrade, currentHr, mealType], ([searchValue, serviceDateValue, currentGradeValue, currentHrValue, mealTypeValue])  => {
    Inertia.get('/pos', {
        search: searchValue, 
        serviceDate: serviceDateValue, 
        grade: currentGradeValue, 
        hr: currentHrValue, 
        mealType: mealTypeValue
    }, {
        preserveState: true,
    })
});

// 监听students变化，值更新后自动执行处理逻辑
watch(() => props.students, (newStudents) => {
    alphaLinks(newStudents);
}, {
    // 组件初始化时如果需要执行一次alphaLinks，可开启下面配置
    // immediate: true
})

该方案可维护性更强，后续如果新增其他修改students的逻辑，不需要重复调用alphaLinks，避免漏写。

方案2：通过Inertia成功回调+nextTick触发 #

如果确定只有当前筛选请求会修改props.students，也可以直接在Inertia请求的成功回调中，等待组件完成props更新后再调用alphaLinks：

// 记得先从vue导入nextTick：import { nextTick } from 'vue'
watch( [search, serviceDate, currentGrade, currentHr, mealType], ([searchValue, serviceDateValue, currentGradeValue, currentHrValue, mealTypeValue])  => {
    Inertia.get('/pos', {
        search: searchValue, 
        serviceDate: serviceDateValue, 
        grade: currentGradeValue, 
        hr: currentHrValue, 
        mealType: mealTypeValue
    }, {
        preserveState: true,
        onSuccess: () => {
            // 等待组件完成props更新后再取最新值
            nextTick(() => {
                alphaLinks(props.students);
            })
        }
    })
});

注意必须搭配nextTick使用：onSuccess触发时Inertia刚拿到后端返回数据，还没完成组件props的同步，此时直接读取props.students仍然是旧值，需要等下一个更新周期才能拿到最新数据。

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