computed的使用

computed() 函数用来创建计算属性，计算属性分为只读计算属性和可读写的计算属性，返回值是 ref 实例。

创建只读计算属性，代码如下。

<template>
  <div>
    普通属性: {{ num }}
    <br />
    计算属性：{{ numAdd }}
    <br />
    <button @click="addOne">修改普通属性</button>
    <button @click="fn">修改计算属性</button>
  </div>
</template>

<script>
// 1．引用 computed
import { ref, computed } from "vue";

export default {
  setup() {
    // 2．计算属性一般依赖于普通属性，先声明普通属性
    var num = ref(10);
    // 3．使用 computed() 函数创建计算属性
    var numAdd = computed(() => {
      return num.value + 1;
    });
    // 4．单击按钮修改普通属性值
    // 结论：可以修改
    var addOne = () => {
      num.value++;
    };
    // 5．单击按钮修改计算属性值
    // 结论：不生效
    var fn = () => {
      console.log(numAdd.value);
      //  numAdd.value + 1  // 这行代码没有实际效果，因为计算属性是只读的
    };
    return {
      num,
      numAdd,
      addOne,
      fn,
    };
  },
};
</script>

创建可读写的计算属性，代码如下。

<template>
  <div>
    普通属性: {{ num }}
    <br />
    计算属性：{{ numAdd }}
    <br />
    <button @click="addOne">修改普通属性</button>
    <button @click="fn">修改计算属性</button>
  </div>
</template>

<script>
// 1．引用 computed
import { ref, computed } from "vue";

export default {
  setup() {
    // 2．计算属性一般依赖于普通属性，先声明普通属性
    var num = ref(10);
    // 3．使用 computed() 函数创建可读写的计算属性
    var numAdd = computed({
      // 取值
      get: () => {
        return num.value + 1;
      },
      // 赋值
      set: (val) => {
        num.value = val; // 修改 num 的值，从而影响 numAdd
      },
    });
    // 4．单击按钮修改普通属性值
    // 结论：可以修改
    var addOne = () => {
      num.value++;
    };
    // 5．单击按钮修改计算属性值
    // 结论：可以修改
    var fn = () => {
      numAdd.value = 100; // 调用 set 方法，修改 numAdd 的值
    };
    return {
      num,
      numAdd,
      addOne,
      fn,
    };
  },
};
</script>