三 分分钟学会 在vue3中 如何使用计算属性 computed

1. computed 优点

### 可以将 响应式数据 进行自定义的逻辑处理后，返回一个变量，直接使用

### 可以自动监听，在 computed 中使用到的 响应式数据的变化，然后实时变化 computed 返回的数据

### 可以缓存计算结果，如果 computed 中使用的 响应式数据没有变化，computed 不会重新执行里面的自定义逻辑代码

2. 如何使用

(1) 普通写法，对响应式数据进行自定义的逻辑处理，返回一个变量，直接使用，并实时监听数据变化

<template>
  <div class="about">
    <!-- 使用响应式数据 -->
    <div>我是data1：{{ data1 }}</div>
    <div>我是data2：{{ data2 }}</div>
    <div>我是data3：{{ data3.a }}</div>
    <div>我是计算属性：{{ total }}</div>

    <!-- 修改响应式数据 -->
    <button @click="changeData1">修改data1</button>
    <button @click="changeData2">修改data2</button>
    <button @click="changeData3">修改data3</button>
  </div>
</template>

<script setup lang="ts">
// 引入computed
import { computed, ref } from 'vue'

// 使用ref声明响应式数据
let data1 = ref(1)

let data2 = ref(5)

let data3 = ref({ a: 10 })

// 使用计算属性 computed 计算 data 和 data1
const total = computed(() => {
  return data1.value + data2.value + data3.value.a
})

// 修改响应式数据 （页面中数据变化了）
const changeData1 = () => {
  data1.value++
}

// 修改响应式数据 （页面中数据变化了）
const changeData2 = () => {
  data2.value += 2
}

// 修改响应式数据 （页面中数据变化了）
const changeData3 = () => {
  data3.value.a += 3
}
</script>

(2) 自定义处理 计算属性的 getter 和 setter

<template>
  <div class="about">
    <!-- 使用响应式数据 -->
    <div>我是data1：{{ data1 }}</div>
    <div>我是data2：{{ data2 }}</div>
    <div>我是data3：{{ data3.a }}</div>
    <div>我是计算属性：{{ total }}</div>

    <!-- 修改响应式数据 -->
    <button @click="changeData1">修改data1</button>
    <button @click="changeData2">修改data2</button>
    <button @click="changeData3">修改data3</button>
    <button @click="changetotal">修改total</button>

  </div>
</template>

<script setup lang="ts">
// 引入computed
import { computed, ref } from 'vue'

// 使用ref声明响应式数据
let data1 = ref(1)

let data2 = ref(5)

let data3 = ref({ a: 10 })

// 使用计算属性 computed 计算 data 和 data1
const total = computed({
  //  getter
  get () {
    let count = data1.value + data2.value + data3.value.a 
    return count > 20 ? 0 : count
  },
  // setter
  set(newValue) {
    data1.value = newValue
    data2.value = newValue
    data3.value.a = newValue
  }
})

// 修改响应式数据 （页面中数据变化了）
const changeData1 = () => {
  data1.value++
}

// 修改响应式数据 （页面中数据变化了）
const changeData2 = () => {
  data2.value += 2
}

// 修改响应式数据 （页面中数据变化了）
const changeData3 = () => {
  data3.value.a += 3
}

// 修改计算属性（页面中数据变化了）
const changetotal = () => {
  total.value = 100
}

</script>