vue 判断对象属性是否变化踩坑日记

最新推荐文章于 2024-07-13 13:53:02 发布

xfxTab

最新推荐文章于 2024-07-13 13:53:02 发布

阅读量1.7k

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_49578914/article/details/122327816

版权

笔记专栏收录该内容

57 篇文章 6 订阅

订阅专栏

本文探讨了在JavaScript中如何有效地监测对象属性的变化，特别是在表单编辑场景下。作者指出，简单使用watch无法准确判断对象是否改变，而直接赋值可能导致引用问题。正确的做法是使用`Object.assign()`创建对象副本，然后通过深度监听来比较新旧值。当属性发生改变时，更新编辑状态。

摘要由CSDN通过智能技术生成

小坑，记录一下：
我更改了某个属性，然后又复原的话，这样对象也是没有改变的
如果只是简单的监听watch肯定不行，每个属性进行判断也不尽人意，

首先想到的肯定是watch

先自定义一个对象formOrigin 赋值
错：this.formOrigin = this.form
对：this.formOrigin = Object.assign({},this.form)

watch监听（isEdit默认为true 没有更改）

form:{
         handler(newValue,oldValue){
             if(oldValue&&oldValue.id) {
               for(let key in this.formOrigin) {
                 if(newValue[key]!= this.formOrigin[key]&&newValue[key]!='') {
                  this.isEdit = false
                  break;
                 }
                 else {
                   this.isEdit = true
                 }
               }
              
      }
          },
        deep:true,//只要当form中的值改变就会触发这个函数且,newValue,oldValue两个参数值相同;
       }