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>