vue3.x专题四 ---- 组合API-computed函数的两种用法总结

computed函数，是用来定义计算属性的，计算属性不能修改。(计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据)

1、computed函数使用方式一，给computed传入函数，返回值就是计算属性的值，案例如下:

：

<template>
  <div>
    <p>今年:{{ age }}</p>
    <p>过十年:{{ newAge }}</p>
  </div>
</template>

<script>
import { ref, computed } from "vue"
export default {
  name: "App",
  setup() {
    const age = ref(16);
    const newAge = computed(() => {
        return age.value + 2
    })
    return {
      age,
      newAge,
    };
  },
};
</script>

<style scoped>
</style>

2、computed函数使用方式二，给computed传入对象，get获取计算属性的值，set监听计算属性改变（可以让计算属性支持双向数据绑定），案例如下:

<template>
  <div>
    <p>今年:{{ age }}</p>
    <p>过十年:{{ newAge }}</p>
    <input type="text" v-model="newAge">
  </div>
</template>

<script>
import { ref, computed } from "vue"
export default {
  name: "App",
  setup() {
    const age = ref(16);
    const newAge = computed({
      get() {
        return age.value + 10;
      },
      // set函数，当给计算属性重新设置值的时候触发
      set(value) {
        age.value = value - 10;
      },
    });
    return {
      age,
      newAge,
    };
  },
};
</script>

<style scoped>
</style>

觉得文章有用的朋友，请点赞收藏...