Vue监听数组对象特定字段变动，巧用computed和set来监听

前端

2023-11-27 02:09:32

Vue 中数组对象特定字段的响应式监听

前言

在 Vue.js 中，处理复杂数据结构时，经常会遇到需要监听数组对象中特定字段变化的情况。本文将深入探讨两种实现此功能的方法：computed 和 set，并探讨它们的差异、最佳实践和示例。

computed

什么是 computed？

computed 是一种计算属性，可从其他属性的值派生其自身的值。当依赖的属性值发生变化时，computed 属性会自动重新计算并更新其值。

监听特定字段

使用 computed 可以监听数组对象中特定字段的变化。为此，请遵循以下步骤：

定义一个 computed 属性，并将其依赖关系设置为要监听的字段。
在 getter 方法中，返回要监听的字段的值。
在 setter 方法中，更新要监听的字段的值（如果需要）。

示例

// data
item: {
  name: 'John',
  lastName: 'Doe'
}

// computed
fullName() {
  return this.item.name + ' ' + this.item.lastName
}

set

什么是 set？

set 是一种内置方法，允许设置对象的属性值。当属性值发生变化时，会自动调用 set 方法。

监听特定字段

使用 set 也可以监听数组对象中特定字段的变化。为此，请遵循以下步骤：

在要监听的字段上定义一个 set 方法。
在 set 方法中，更新要监听的字段的值。

示例

// data
item: {
  name: 'John',
  lastName: 'Doe'
}

// watch
watch: {
  'item.name'(newValue, oldValue) {
    this.item.fullName = newValue + ' ' + this.item.lastName
  }
}

差异

computed 和 set 都可以实现数组对象特定字段的响应式监听，但它们有一些关键差异：

可写性： computed 是只读属性，而 set 是可写属性。
自动调用： computed 的 getter 方法会在依赖关系发生变化时自动调用，而 set 的 setter 方法需要手动调用。
复杂性： computed 更适合监听简单字段，而 set 更适合监听复杂字段（例如嵌套对象）。

最佳实践

在实际开发中，根据具体情况选择使用 computed 或 set：

只读字段： 使用 computed。
可写字段： 使用 set。
深层字段： 使用 set。

示例

使用 computed

<template>
  <div>
    <input type="text" v-model="item.name">
    <p>{{ item.fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {
        name: 'John',
        lastName: 'Doe'
      }
    }
  },
  computed: {
    fullName() {
      return this.item.name + ' ' + this.item.lastName
    }
  }
}
</script>

使用 set

<template>
  <div>
    <input type="text" v-model="item.name">
    <p>{{ item.fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {
        name: 'John',
        lastName: 'Doe'
      }
    }
  },
  watch: {
    'item.name'(newValue, oldValue) {
      this.item.fullName = newValue + ' ' + this.item.lastName
    }
  }
}
</script>