Vue 3 计算的 Getter Setter

在 Vue 3 中，我们可以使用计算属性的 getter 和 setter 来处理绑定的数据。这种方式可以方便我们对某个属性进行监听和操作，并且可以使得代码更加清晰和规范。

计算属性

在 Vue 3 中，我们可以使用计算属性来处理绑定的数据。计算属性是一种通过 setter 和 getter 方法来实现的数据绑定方式。下面是一个计算属性的示例：

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(name) {
        const parts = name.split(' ')
        this.firstName = parts[0]
        this.lastName = parts[1]
      }
    }
  }
})

在这个例子中，我们定义了一个 computed 属性，它包含了一个 fullName 计算属性。fullName 计算属性的 get 方法返回了 firstName 和 lastName 的拼接值。而 set 方法则会将传入的字符串分割成两个部分，并将它们设置为 firstName 和 lastName 的值。

我们还可以使用计算属性来处理更加复杂的逻辑，例如：

const app = Vue.createApp({
  data() {
    return {
      users: [
        { name: 'John', age: 25 },
        { name: 'Mary', age: 30 },
        { name: 'Mike', age: 35 },
      ]
    }
  },
  computed: {
    averageAge() {
      return this.users.reduce((total, user) => total + user.age, 0) / this.users.length
    }
  }
})

在这个例子中，我们定义了一个包含了多个用户的数组 users。我们可以使用 computed 属性来定义一个 averageAge 计算属性，该属性的 get 方法返回的是 users 数组中所有用户年龄的平均值。

注册计算属性

在 Vue 3 中，我们可以使用 computed 函数来注册计算属性，例如：

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(name) {
        const parts = name.split(' ')
        this.firstName = parts[0]
        this.lastName = parts[1]
      }
    }
  },
  methods: {
    greet() {
      console.log('Hello, ' + this.fullName + '!')
    }
  }
})

app.mount('#app')

在这个例子中，我们使用 computed 函数来注册了一个 fullName 计算属性。computed 函数接受一个包含了 getter 和 setter 方法的对象作为参数，并返回一个 Ref 对象。我们可以在组件中通过 fullName.value 来访问计算属性的值。

总结

在 Vue 3 中，我们可以使用计算属性的 getter 和 setter 来处理绑定的数据，从而使得代码更加清晰和规范。对于简单的计算属性，我们可以直接在组件中定义；对于更加复杂的计算属性，我们可以使用 computed 函数来注册。