vue computed get set 用法

computed属性是Vue.js中一个非常有用的特性，它可以根据依赖的数据动态计算出新的值，并且缓存计算结果，只有当依赖的数据发生变化时才会重新计算。computed属性有两种用法：get和set。

1. get用法：用于获取计算属性的值，类似于普通属性的读取操作。下面是一个例子：

<script>
import { computed, ref } from "vue";

export default {
  setup() {
    const year = ref(2022);
    const nextYear = computed(() => {
      return +year.value + 1;
    });

    return {
      year,
      nextYear,
    };
  },
};
</script>

在上面的例子中，我们定义了一个year变量和一个nextYear计算属性。nextYear的值是根据year计算得出的，当year的值发生变化时，nextYear的值也会相应地发生变化。

2. set用法：用于设置计算属性的值，类似于普通属性的赋值操作。下面是一个例子：

<script>
import { computed, ref } from "vue";

export default {
  setup() {
    const year = ref(2022);
    const nextYear = computed({
      get: () => {
        return +year.value + 1;
      },
      set: (value) => {
        year.value = value - 1;
      },
    });

    return {
      year,
      nextYear,
    };
  },
};
</script>

在上面的例子中，我们定义了一个nextYear计算属性，并且同时定义了get和set方法。当我们给nextYear赋值时，实际上是调用了set方法，然后根据set方法中的逻辑修改了year的值。