elementUI表单Object.assign处理后无法编辑?

Question

this.form = {};
Object.assign(this.form, this.tableData[index - 1]);//此时表单无法编辑

this.form= Object.assign({}, this.tableData[index - 1]);//这时可编辑

Answer 1

vue2对于新增的属性不能实现监听。

上面的代码是设置form为空对象，然后监听这个空对象，最后用assign为这个空对象添加属性，这样是监听不到的。

下面的代码是声明一个空对象，然后为这个未向添加属性，然后把这个对象赋值给form，最后系统监听这个对象。

vue-注意事项

Answer 2

摘抄至官网原文：

有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

你可以在官网看一下这里的解答：https://cn.vuejs.org/v2/guide/reactivity.html#检测变化的注意事项

Answer 3

假设data是这样的

data() {
  return {
    form: {}, // 此时form已经被改造，拥有响应式数据的功能
  };
}

假设data是这样的

data() {
  return {
    form: {
        foo: 'foo', // 不仅form被改造，其中的foo也被改造
    },
  };
}

首先需要清楚知道数据什么时候会被改造。

对于Object.assign可以想象成下面这样，假设tableData为一个object

const keys = Object.keys(this.tableData);
for (const key of keys) {
  this.form[key] = this.tableData[key]; // 这样写入的数据不会被改造
}

但是你这样写，form是已经被改造过的数据，更新它时，form其中的内容也将被改造。

this.form = Object.assign(xxx);

所以你可以想想下面的内容，其中test也不是响应式的

this.form.test = Object.assign(xxx);

遇到不响应的问题时，该怎么检查呢?
你可以看看有没有__ob对象，或者有没有reactiveGetter/reactiveSetter，图1中的test就不是相应的，因为没有__ob

那么要如何更了解这些东西呢？我推荐可以看看Vue源码解析的一些博文，或者自己试着阅读Vue的源码，就能知道上面这些知识了。