关于javascript:objectassgin导致的vue双向数据绑失效

40次阅读

共计 1531 个字符，预计需要花费 4 分钟才能阅读完成。

前几天在写一个后盾我的项目的时候应用 object.assgin 时呈现了一个很奇怪的 bug，特写了一个简略的 demo 探索一下。demo 为一个根底表单：

后端数据中只有 name 和喜好有值。

此时依据后端数据将表单中的数据赋值：
this.personData = res.data.userTableData
成果非常的合乎预期，轻易点点也没有什么其余的问题：

但如果用上面这种形式对表单数据进行赋值：
Object.assign(this.personData, res.data.userTableData)
奇怪的景象产生了，刷新后表单没有初始数值，而且表单的批改不失效：

此时批改静止栏的值后发现前两栏的数据终于更新了，然而前两栏的数据仍然是不能做任何的间接批改，只有静止一栏的数据批改后，前两栏数据之前做过的批改才会显示进去。让人不禁想问到底产生了什么。

为此我查问了 object.assgin 相干的代码，发现这篇文章：

Object.myAssign = function (target, ...src) {for (let i = 0; i < src.length; i++) {if (src[i] !== null || src[i] !== undefined) {
      // 过滤掉源对象为 null 和 undefined 的状况
      for (let key in src[i]) {
        // in 运算符会查找原型对象上的可枚举属性，所以须要通过 Object.prototype.hasOwnProperty 办法过滤掉对象原型对象上的属性
        if (src[i].hasOwnProperty(key)) {target[key] = src[i][key]
        }
      } 
    }
  }
  return target
}

要害代码：target[key] = src[i][key]

到这里开始问题就初现端倪了，我又找到了上面这篇文章

要害局部：
person.name = {name: ‘tom’} => 触发了 set
person.name =>{name: “tom”}
person.name.name = 123123
=> 没有打印出任何信息，阐明批改 name 的属性值并没有触发 set 办法。
person.name.sex = 333
=> 没有打印出任何信息，阐明增加 name 的属性值并没有触发 set 办法。delete person.name.name => 没有打印出任何信息，阐明删除 name 的属性值并没有触发 set 办法。
Object.defineProperty(person.name, ‘name’, {value: 4444}) => 没有打印出任何信息，阐明 Object.defineProperty 也没有触发 set 办法。

我直呼好家伙，原来对象的双向数据绑定失效条件竟然如此刻薄，object.assgin 的赋值办法没有触发到 set 函数，天然也不会告诉到调用其值的对象上，直到在表单中给静止栏赋值时 this.personData 的 set 被触发，之前的所有表单的数据变动才被展现进去。

这时第二个问题呈现了，为什么在批改静止一栏的数据时会又这么反常的景象？

我认为是当间接批改对象里的值时，仅仅是扭转了指向栈数据的指针指向，对于双向数据绑定并未产生无效影响。所以此时批改前两栏的数据时尽管 this.personData 里的属性的指针指向被批改了，但批改值在双向数据绑定中的指针指向还是之前的地址。这也解释了为什么在批改静止一栏的值后之前做过的变动又会展现进去，因为 this.personData 的值的确被扭转了，但你之后无论怎么扭转前两栏的数据，都是不会有任何变动展现进去的。

援用的相干文章地址：