vue3 computed方法使用详细讲解

Computed方法用于创建计算属性，它的值由其他响应式数据计算得出，并且会在依赖数据发生改变时自动更新。因为vue3兼容vue2的选项式api,所以习惯用vue2的小伙伴可以直接用vue2的方法写是没有问题的。但我这里介绍的是computed在vue3中的新语法：

内容涵盖了computed在我们开发中所有能用到的方法，另外也会在每个使用方法上附上使用情景：

1.基础写法

使用场景：我们在做项目时经常会在模板中写表达式来获取自己想要的结果，比如这样：<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span> 但这样的表达式写入太多会造成代码臃肿，所以官方不建议在模板中写入太多的表达式操作，我们就可以使用computed方法来实现相同的功能：

<script setup>
// 1.第一步先引入computed方法：
import { ref, computed } from 'vue'

const author = ref(['1','2','3'])

// 2.我们定义了一个计算属性publishedBooksMessage 来接收computed()方法返回的值
const publishedBooksMessage = computed(() => {
  return author.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
// 3.将publishedBooksMessage 变量写到模板中
  <span>{{ publishedBooksMessage }}</span>
</template>

注意：基础写法中computed（）方法默认接收的是一个getter函数，返回值（也就是例子中的publishedBooksMessage 的值）为一个可读计算属性ref，也就是我们拿到值之后通常在别的地方直接引用就行，是不能做更改操作的，比如publishedBooksMessage.value++这样的操作，但基础写法在日常生活中使用的更多。所以只是可读也够用了

2. 完整写法

使用场景：我在基础写法中介绍到，基础写法返回的值只可读不可更改，所以当我们的项目涉及到需要更改的操作时，可以使用computed()的完整写法，完整写法提供getter和setter两个函数，我们在getter函数中获取该计算属性的值，在setter函数中可以对该计算属性的值进行更改操作，默认的基础写法只提供getter函数哦

<script setup>

import {ref,computed } from 'vue'

let booksNum = computed({ 
    get:()=>{   return booksNum.value *10  }, 
    set:(value)=>{   return booksNum.value = value/10 } 
})

</script>

3.computed方法接收参数

使用场景：我们在computed的基础写法和完整方法中其实已经满足我们绝大部分需求了，但有些小伙伴在开发时会遇到这样类似这样的问题：在模板中使用v-for遍历循环时需要传参，computed()方法需要接收参数才能处理数据，这种情况下computed方法该如何接收参数呢？别慌，很简单，只需要在计算属性内部返回一个函数就可以了

<script setup>

import {ref,computed } from 'vue'

const arrList  = ref('你好','2','3')

const result =computed(()=>{
  return (text) =>{
    return text+'1'
  }
})

</script >

<template>
  <div   v-for="item in arr" >
     <span  v-html="result (item)">
     </span>
  </div>
</template>