VueJS新手求助：如何判断关联值集合是否发生变化？

嘿，作为Vue新手能想到找简洁优雅的方案真的超棒！针对你要判断focusRecord这组值是否发生变化的需求，我给你两个实用又符合Vue风格的思路：

如果需要实时知道focusRecord有没有被修改，可以用Vue的watch选项开启深度监听，配合初始值对比来判断变化：

app = new Vue({
    el: '#app',
    data: {
        records: [],
        focusRecord: {
            id: '',
            firstname: '',
            lastname: ''
        },
        focusRecordInitial: {}
    },
    created: function(){
        // 加载records数据...
    },
    watch: {
        // 深度监听focusRecord的所有属性变化
        focusRecord: {
            deep: true,
            handler(newVal) {
                // 对比当前值和初始值，判断是否有变化
                const hasChanged = !this.isObjectEqual(newVal, this.focusRecordInitial);
                console.log('记录是否已修改:', hasChanged);
                // 这里可以根据变化状态做其他逻辑，比如启用/禁用保存按钮
            }
        }
    },
    methods: {
        // 打开模态框时，复制选中的记录到focusRecord，并保存初始值
        openModal(record) {
            // 用深拷贝避免引用问题，否则修改focusRecord会同步改原record
            this.focusRecord = JSON.parse(JSON.stringify(record));
            this.focusRecordInitial = JSON.parse(JSON.stringify(record));
        },
        // 简单的对象深对比方法，也可以用lodash的_.isEqual更可靠
        isObjectEqual(obj1, obj2) {
            return JSON.stringify(obj1) === JSON.stringify(obj2);
        }
    }
})

注意：如果你的record里包含Date、函数这类复杂类型，JSON.parse(JSON.stringify())会失效，这时候推荐用lodash的_.cloneDeep来做深拷贝。

如果不需要实时监听，只需要在点击保存这类操作时判断是否有修改，直接对比focusRecord和focusRecordInitial会更高效：

app = new Vue({
    el: '#app',
    data: {
        records: [],
        focusRecord: {
            id: '',
            firstname: '',
            lastname: ''
        },
        focusRecordInitial: {}
    },
    created: function(){
        // 加载records数据...
    },
    methods: {
        openModal(record) {
            this.focusRecord = JSON.parse(JSON.stringify(record));
            this.focusRecordInitial = JSON.parse(JSON.stringify(record));
        },
        saveChanges() {
            const hasChanged = !this.isObjectEqual(this.focusRecord, this.focusRecordInitial);
            if (hasChanged) {
                console.log('有修改，执行保存逻辑');
                // 这里写你的保存API调用等代码
            } else {
                console.log('没有修改，无需保存');
            }
        },
        isObjectEqual(obj1, obj2) {
            return JSON.stringify(obj1) === JSON.stringify(obj2);
        }
    }
})

这个方案避免了持续监听的性能开销，适合只在特定场景判断的需求。

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