问题

今天遇到一个问题：在处理一个list时，要监听list中一个表单值的变化，同时对list其中的项进行回写，如果不判断新旧值相等的问题，就会造成无限循环调用watch回调，所以需要判断oldValue !== newValue 才可以进行对list子项写入的操作。
但是由于监听的是一个表单对象，所以oldValue和newValue永远相等

监听subAuditItemList里Item._formValue 给 Item.extraSubmitParams 赋值

    watch(
        () => subAuditItemList.map(item => item._formValue),
        (newValues, oldValues) => {
            newValues.forEach((newValue, index) => {
                const item = subAuditItemList[index];
                // 检查是否有变化，只有在变化时才更新
                console.log(JSON.stringify(item._formValue) !== JSON.stringify(oldValues[index]));   // 永远为false
                // if (JSON.stringify(item._formValue) !== JSON.stringify(oldValues[index])) {
                //     root.value.$set(item, 'extraSubmitParams', {
                //         ...item.extraSubmitParams,
                //         ...newValue,
                //     });
                //     // item.extraSubmitParams = {
                //     //     ...item.extraSubmitParams,
                //     //     ...newValue,
                //     // };
                // }
            });
        },
        {
            deep: true
        }
    );

原理

Vue监听值类型不会出现新旧值打印相等的问题，只有在监听引用类型的时候会遇到新旧相等的问题。

Vue官方的解释是：在变更（不是替换）对象或数组时，新值与旧值相同，因为他们指向同一数组或对象，Vue不会保留变更前值的副本。

解决方案

通过computed对引用类型cloneDeep,watch这个计算属性即可。

原理：深拷贝watch的值内存地址有更新，和watch一个值类型的数据没区别。

   const formValueList = computed(() => {
        return JSON.parse(JSON.stringify(subAuditItemList.map(item => item._formValue)));
    });
    watch(
        formValueList,
        (newValues, oldValues) => {
            console.log(JSON.stringify(newValues), JSON.stringify(oldValues));
        },
        {
            deep: true
        }
    );