vue3+vite+ts--computed计算属性的使用

• 接收一个getter函数，并为 getter 函数返回的值，返回一个ref 对象，并且这个ref对象不可以被修改；
• 接收一个具有 get 和 set 的对象，返回一个ref 对象，并且这个ref对象可以被修改；

一、接收一个getter函数

<template>
  <div
    class=""
    style="
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    "
  >
    <h1>computed计算属性</h1>
    <div>computed:{{ testComputed }}</div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
let number1 = ref<number>(100);
const number2 = ref<number>(200);
let testComputed = computed<number>(() => {
  return number1.value + number2.value;
});
</script>

<style lang="scss" scoped></style>

结果：

二、接收一个具有 get 和 set 的对象

<template>
  <div
    class=""
    style="
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    "
  >
    <h1>computed计算属性</h1>
    <div>computed:{{ testComputed }}</div>
    <el-button @click="edit">修改</el-button>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
let number1 = ref<number>(100);
const number2 = ref<number>(200);

let testComputed = computed<number>({
  //1.get是读取
  //2.当testComputed 依赖的值改变时，就会触发get方法，
  get() {
    return number1.value + number2.value;
  },
  //1.set是修改
  //2.当改变整个testComputed时，才会触发set方法，如果testComputed是对象改变对象的某个属性的值时，不会触发set方法
  //3.返回值val可以赋值给其他，不可以赋值给自己
  set(val) {
    console.log('触发了set', val);
  }
});
const edit = () => {
  //给整个计算属性赋值才会触发set
  testComputed.value = 19;
};
</script>

<style lang="scss" scoped></style>

用法总结：

1. get是读取

2. 当testComputed 依赖的值改变时，就会触发get方法

3. set是修改

4. 当改变整个testComputed时，才会触发set方法，如果testComputed是对象改变对象的某个属性的值时，不会触发set方法

5. 返回值val可以赋值给其他，不可以赋值给自己