vue3 computed get set

// Vue 3 computed get set 示例代码

import { ref, computed } from 'vue';

export default {
  setup() {
    // 定义一个响应式变量
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 使用 computed 定义一个带有 getter 和 setter 的计算属性
    const fullName = computed({
      // getter 函数，用于获取计算属性的值
      get: () => {
        return `${firstName.value} ${lastName.value}`;
      },
      // setter 函数，用于设置计算属性的值
      set: (newValue) => {
        const names = newValue.split(' ');
        firstName.value = names[0];
        lastName.value = names[1];
      }
    });

    // 返回计算属性和其他变量以便在模板中使用
    return {
      firstName,
      lastName,
      fullName
    };
  }
};

解释说明：

1. ref：用于定义响应式变量 firstName 和 lastName。
2. computed：用于定义一个带有 getter 和 setter 的计算属性 fullName。
   • getter：当访问 fullName 时，会调用 getter 函数，返回 firstName 和 lastName 拼接后的字符串。
   • setter：当给 fullName 赋新值时，会调用 setter 函数，将新值按空格分割并分别赋值给 firstName 和 lastName。
3. 返回对象：将 firstName、lastName 和 fullName 返回，以便在组件模板中使用。