Vue 中如何设置计算属性的 setter？

推荐答案

在 Vue 中，计算属性默认只有 getter，但你可以通过提供一个 setter 来使其可写。以下是如何设置计算属性的 setter 的示例：

// www.javascriptcn.com code example
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      // setter
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};

在这个例子中，fullName 是一个计算属性，它有一个 getter 和一个 setter。getter 返回 firstName 和 lastName 的组合，而 setter 则允许你将 fullName 设置为一个新值，并自动更新 firstName 和 lastName。

本题详细解读

计算属性的基本概念

计算属性是 Vue 中用于处理复杂逻辑的属性。它们是基于它们的依赖进行缓存的，只有在依赖发生变化时才会重新计算。默认情况下，计算属性是只读的，即只有 getter。

为什么需要 setter？

在某些情况下，你可能希望计算属性是可写的。例如，你可能有一个计算属性 fullName，它由 firstName 和 lastName 组成。你可能希望通过直接设置 fullName 来更新 firstName 和 lastName。这时，你就需要为计算属性提供一个 setter。

如何定义 setter

在 Vue 中，计算属性可以通过一个对象来定义，这个对象包含 get 和 set 方法。get 方法用于获取计算属性的值，而 set 方法用于设置计算属性的值。

示例代码解析

// www.javascriptcn.com code example
computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

• getter: get() 方法返回 firstName 和 lastName 的组合。
• setter: set(newValue) 方法接收一个新值 newValue，并将其拆分为 firstName 和 lastName，然后更新相应的数据属性。

使用场景

• 双向绑定: 当你需要将计算属性与表单输入绑定，并且希望表单输入的变化能够反映到数据属性上时，setter 非常有用。
• 复杂逻辑处理: 当你需要在设置计算属性时执行一些复杂的逻辑时，setter 可以帮助你实现这一点。

通过这种方式，你可以更灵活地控制计算属性的行为，使其既能读取数据，又能修改数据。