vue计算属性的getter和setter

Vue计算属性的getter和setter分别用于获取计算属性的值和设置计算属性的值。

在计算属性中，getter函数用于获取计算属性的值，setter函数用于设置计算属性的值。当计算属性的值发生变化时，Vue会自动更新相关的视图。

例如，下面的代码中，计算属性fullName由firstName和lastName计算而来。getter函数返回fullName的值，setter函数用于设置firstName和lastName的值。

data() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
},
computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName
    },
    set(value) {
      const names = value.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

在模板中，我们可以直接使用计算属性fullName：

<div>{{ fullName }}</div>

当我们修改fullName的值时，会自动调用setter函数，更新firstName和lastName的值：

this.fullName = 'Jane Smith'