Vue关于对象直接赋值的坑及解决

Vue关于对象直接赋值的坑及解决

在Vue中，通过对象直接赋值的方式对一个对象进行修改，会引起一些潜在的问题。本攻略将详细讲解这个问题及其解决方案。

问题描述

假设有一个对象 obj：

let obj = { name: '张三', age: 20 }

现在在Vue组件中，我们使用这个对象：

<template>
  <div>
    <p>姓名：{{ obj.name }}</p>
    <p>年龄：{{ obj.age }}</p>
    <button @click="change()">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: '张三', age: 20 }
    }
  },
  methods: {
    change() {
      this.obj.name = '李四'
      this.obj.age = 21
    }
  }
}
</script>

我们发现，点击“点击修改”按钮修改数据后，视图并没有更新。这是因为在Vue中，对象直接赋值是不被响应式的。

解决方案

方案1：使用 $set 方法

Vue提供了一个 $set 方法，可以将一个对象的属性设置为响应式属性。我们可以使用 $set 方法来将 obj 的属性设置为响应式属性：

<template>
  <div>
    <p>姓名：{{ obj.name }}</p>
    <p>年龄：{{ obj.age }}</p>
    <button @click="change()">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: '张三', age: 20 }
    }
  },
  methods: {
    change() {
      this.$set(this.obj, 'name', '李四')
      this.$set(this.obj, 'age', 21)
    }
  }
}
</script>

方案2：使用 Object.assign 方法

另一种解决方案是使用 Object.assign 方法，将修改后的对象属性合并到原对象中，从而触发响应式更新：

<template>
  <div>
    <p>姓名：{{ obj.name }}</p>
    <p>年龄：{{ obj.age }}</p>
    <button @click="change()">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: '张三', age: 20 }
    }
  },
  methods: {
    change() {
      this.obj = Object.assign({}, this.obj, { name: '李四', age: 21 })
    }
  }
}
</script>

示例说明

以下是两个示例，分别演示以上两种解决方案的使用。

示例1：使用 $set 方法

假设我们有一个数组 arr：

let arr = [{ name: '张三', age: 20 }, { name: '李四', age: 21 }]

现在在Vue组件中，我们使用这个数组：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <p>姓名：{{ item.name }}</p>
        <p>年龄：{{ item.age }}</p>
      </li>
    </ul>
    <button @click="change()">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [{ name: '张三', age: 20 }, { name: '李四', age: 21 }]
    }
  },
  methods: {
    change() {
      this.$set(this.arr[0], 'name', '王五')
      this.$set(this.arr[1], 'age', 22)
    }
  }
}
</script>

在这个示例中，我们在数组中的两个对象中分别修改了一个属性，并使用 $set 方法使修改后的属性成为响应式属性。

示例2：使用 Object.assign 方法

假设我们有一个嵌套的对象 nestedObj：

let nestedObj = {
  name: '张三',
  age: 20,
  address: {
    province: '北京',
    city: '北京市',
    district: '朝阳区'
  }
}

现在在Vue组件中，我们使用这个对象：

<template>
  <div>
    <p>姓名：{{ nestedObj.name }}</p>
    <p>年龄：{{ nestedObj.age }}</p>
    <p>地址：{{ nestedObj.address.province }}{{ nestedObj.address.city }}{{ nestedObj.address.district }}</p>
    <button @click="change()">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nestedObj: {
        name: '张三',
        age: 20,
        address: {
          province: '北京',
          city: '北京市',
          district: '朝阳区'
        }
      }
    }
  },
  methods: {
    change() {
      this.nestedObj = Object.assign({}, this.nestedObj, {
        name: '李四',
        address: {
          district: '海淀区'
        }
      })
    }
  }
}
</script>

在这个示例中，我们修改了嵌套对象中的两个属性，并使用 Object.assign 方法将修改后的对象赋值给 nestedObj，从而触发响应式更新。