Vue中除了this.$forceUpdate()，还有更优的元素更新方法吗？

核心问题排查 #

你遇到的下拉框不更新问题，本质是代码里存在数据赋值错误、key值不合理以及异步逻辑顺序错误，这些问题不是靠$forceUpdate()能解决的，以下是具体修复方案：

1. 修复refreshDisplayNameList的数据赋值错误 #

原方法里定义了displayNameCombine但始终是空数组，接口返回的有效数据完全没用到，导致displayNameList一直是空的，下拉框自然不会有选项更新：

async refreshDisplayNameList(e, updated_data) {
    let data = {
        ledgerType: 'DisplayName'
    }
    
    let res = await getList(data);
    if (res && res.status_code == 200) {
        // 直接赋值接口返回的有效数据，替换空数组
        this.displayNameList = res.content.data;
    }
}

2. 给el-option设置唯一稳定的key #

原代码用数组索引i作为key，当数组新增/删除元素时，Vue会错误复用组件，导致下拉选项不更新。改成用每个选项的唯一标识uuid：

<el-select v-model="row.display_name_uuid">
  <el-option v-for="item in displayNameList" 
           :key="item.uuid" :value="item.uuid" 
           :label="item.display_name">
   </el-option>
</el-select>

3. 简化getExclusiceUuid的更新逻辑 #

原方法里的splice删除再添加、重复调用$forceUpdate()都是冗余操作，直接修改目标元素的属性即可，Vue响应式系统会自动触发更新：

async getExclusiceUuid (data, val) {
    // 等待下拉列表数据刷新完成
    await this.refreshDisplayNameList();
    // 直接找到对应项修改属性，无需复杂操作
    const targetItem = this.list.find(item => item.key === data.key);
    if (targetItem) {
        targetItem.display_name_uuid = val;
    }
}

注意要把这个方法改成async，确保等待下拉列表数据更新完成后再修改list。

4. 调整异步方法的调用顺序 #

原代码中同步调用父组件的两个方法，但refreshDisplayNameList是异步的，必须等待它执行完成后再调用getExclusiceUuid：

createDisplayNameExclusive(data).then(async res => {
    if (res.status_code == 200) {
        this.$message({
            message: 'Created',
            type: 'success'
        })
        this.dialogFormVisible = false
        
        data.key = this.form.key
        
        // 等待下拉列表数据刷新完成
        await this.$parent.refreshDisplayNameList(data, res.content.data);
        // 再更新list中的对应项
        this.$parent.getExclusiceUuid(data, res.content.data);

        // 完全不需要$forceUpdate，响应式系统会自动处理渲染
    } else {
        this.$message({
            message: res.content.message,
            type: 'warning'
        })
    }
}).catch(e => {
    this.loading = false
})

内容的提问来源于stack exchange，提问作者Anson Aştepta