Computed 学习笔记

Computed

一.介绍

computed()方法期望接收一个 getter 函数，返回值为一个计算属性ref。

厚礼蟹_{一句话两个链接，是不是有点方😏？我知道你有点方，但是你先别方}这东西并不是很难，甚至有点简单哈哈哈，只是名词搞得很深奥。

作为一个前端小白，我被计算属性这四个字困扰了很久，直到仔细研读了一下官网的API之后发现，这东西对我来说可能叫缓存属性或许更贴切一些

我们现在有个这么一段代码：

<template>
  <div>
    <span>{{ author.name }}</span>
    <span>{{ calculateBooksMessage() }}</span>
    <button @click="delBook" >按钮</button>
    <button @click="changeName">改名</button>
  </div>
</template>
 
<script setup lang="ts">
import { reactive } from "vue";
const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 组件中
function calculateBooksMessage() {
  console.log("进入方法")
  return author.books.length > 0 ? 'Yes' : 'No'
}

const delBook = () => {
  author.books.length -= 1;
}

const changeName = () => {
  author.name += "JohnDoe";
}
</script> 

代码中，我们可以发现一些弊端，就是无论你做了delBook还是changeName,方法calculateBooksMessage()调用总是会在重渲染发生时再次执行函数。当计算量巨大的时候，这会大量的消耗资源，因此计算属性，就这么诞生了~

二.基础实例

我们在下面的代码中定义了一个计算属性 publishedBooksMessage。computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref。和其他一般的 ref 类似，你可以通过 publishedBooksMessage.value 访问计算结果。计算属性 ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加 .value。

Vue 的计算属性会自动追踪响应式依赖。它会检测到 publishedBooksMessage 依赖于 author.books，所以当 author.books 改变时，任何依赖于 publishedBooksMessage 的绑定都会同时更新。

说人话就是：计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

三.computed()

computed()函数有两个方式来返回一个计算属性

3.1 对象形式

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

<template>
   <div>{{ mul }}</div>
   <div @click="mul = 100">click</div>
</template>
 
<script setup lang="ts">
import { computed, ref } from 'vue'
let price = ref<number | string>(1)//$0
let mul = computed({
   get: () => {
      return price.value
   },
   set: (value) => {
      price.value = 'set' + value
   }
})
</script>

3.2 函数形式

用函数的形式来返回计算属性是只读，是不允许修改的.

import { computed, reactive, ref } from 'vue'
let price = ref(0)//$0
 
let m = computed<string>(()=>{
   return `$` + price.value
})
 
price.value = 500