vue中对象的赋值Object.assign({}, row)方式

在Vue中，我们经常需要对对象进行赋值。而Object.assign()是一个常用的对象赋值操作，尤其常用于实现浅拷贝。在Vue中，我们可以使用Object.assign({}, row)来实现浅拷贝，将row对象的所有属性和方法赋值给一个空对象。

以下是Object.assign()的基本语法：

Object.assign(target, source1, source2...)

其中，target是目标对象，source1、source2等是一个或多个源对象。该方法会将源对象的所有可枚举属性复制到目标对象中，并返回目标对象。

示例1：

<script>
export default {
  data() {
    return {
      person: {
        name: 'Tom',
        age: 18
      }
    }
  },
  methods: {
    handleClick() {
      const newPerson = Object.assign({}, this.person, { age: 20 });
      console.log(newPerson); // { name: 'Tom', age: 20 }
    }
  }
}
</script>

在上面的示例中，我们定义了一个person对象并将它赋值给data属性中。在methods中定义了一个handleClick()方法，在该方法中使用Object.assign()方法对person进行了拷贝，并将age从18改变为20，赋值给了一个新的对象newPerson。最后输出了newPerson的结果。

示例2：

<template>
  <div>
    <ul>
      <li v-for="(row, index) in rows" :key="index">
        <p>{{ row.text }}</p>
        <button @click="handleClick(row)">Change Color</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        { text: 'Vue' },
        { text: 'React' },
        { text: 'Angular' }
      ]
    }
  },
  methods: {
    handleClick(row) {
      const newRow = Object.assign({}, row, { color: 'red' });
      const index = this.rows.indexOf(row);
      this.rows.splice(index, 1, newRow);
    }
  }
}
</script>

在上述示例中，我们定义了一个rows数组，并在模板中使用v-for指令循环遍历每个元素。在每个li元素中，我们显示了当前对象的text属性，并添加了一个Change Color的按钮。在handleClick()方法中，我们创建了一个新的对象newRow并添加了一个color属性，并使用Vue提供的splice()方法将原始row对象替换为新的newRow对象。从而实现了改变颜色的效果。