前端之vue3计算属性computed

vue3的计算属性 computed(是组合式api,用时引入)简写实例(只读)读写实例(get/set)总结

computed(是组合式api,用时引入)

computed是一个函数,
只读时, 参数是匿名函数
读写时, 参数是含有get()和set()的对象

简写实例(只读)

向computed函数传入一个匿名函数

  setup() {
    // 数据
    let person = reactive({
      firstName: "四",
      lastName: "李",
    });
    // 方法

    // 计算属性--------------------------------------------------
    // reative添加的属性都是响应式的
    person.fullName = computed(() => {
      return person.lastName + "-" + person.firstName;
    });

    // 返回对象
    return {
      person,
    };
  },

读写实例(get/set)

向computed函数传入一个(含get和set函数的)对象

  setup() {
    // 数据
    let person = reactive({
      firstName: "四",
      lastName: "李",
    });
    // 方法

    // 计算属性
    // reative添加的属性都是响应式的
    person.fullName = computed({
      get() {
        return person.lastName + "-" + person.firstName;
      },
      set(value) {
        const arr = value.split("-");
        person.firstName = arr[1];
        person.lastName = arr[0];
      },
    });

    // 返回对象
    return {
      person,
    };
  },

总结