vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的選項式API，所以可以直接使用 vue2的寫法，這篇文章主要介紹 vue3 中 computed 的新用法，對比 vue2 中的寫法，讓您快速掌握 vue3 中 computed 的新用法。

組合式 API 中使用 computed 時，需要先引入：import { computed } from "vue"。引入之后 computed 可以傳入的參數有兩種：回調函數和 options 。具體看看它是如何使用的?

一、函數式寫法

在vue2中，computed 寫法：

1. computed:{ 
2.  sum(){ 
3.   return this.num1+ this.num2 
4.  } 
5. } 

在vue3 如果使用選項式API也可以這樣寫，主要看下組合式API的使用。

示例1：求和

1. import { ref, computed } from "vue" 
2. export default{ 
3.  setup(){ 
4.   const num1 = ref(1) 
5.   const num2 = ref(1) 
6.   let sum = computed(()=>{ 
7.    return num1.value + num2.value 
8.   }) 
9.  } 
10. } 

調用 computed 時， 傳入了一個箭頭函數，返回值作為 sum 。相比之前，使用更加簡單了。如果需要計算多個屬性值，直接調用就可以。如：

1. let sum = computed(()=>{ 
2.  return num1.value + num2.value 
3.  }) 
4. let mul = computed(()=>{ 
5.  return num1.value * num2.value 
6.  }) 

該示例過于簡單，看不明白的可在文章后面閱讀完整實例1。

二、options 寫法

計算屬性默認只有 getter ，在需要的時候也可以提供 setter 。在vue2中用法如下：

1. computed:{ 
2.  mul:{ 
3.   get(){ // num1值改變時觸發 
4.    return this.num1 * 10 
5.   }, 
6.   set(value){ // mul值被改變時觸發 
7.    this.num1 = value /10 
8.   } 
9.  } 
10. } 

mul 屬性是 給num1 放大10，如果修改 mul 的值，則 num1 也隨之改變。

在 vue3 中 ：

1. let mul = computed({ 
2.  get:()=>{ 
3.   return num1.value *10 
4.  }, 
5.  set:(value)=>{ 
6.   return num1.value = value/10 
7.  } 
8. }) 

這兩種寫法不太一樣，仔細觀察區別不大，get 和 set 調用也是一樣的。

在此示例中代碼簡單，如果沒太理解，可查看文章后面的完整實例2。

完整實例1：

1. <template> 
2.  <div> 
3.   {{num1}} + {{num2}} = {{sum}} 
4.   <br> 
5.   <button @click="num1++">num1自加</button> 
6.   <button @click="num2++">num2自加</button> 
7.  </div> 
8. </template> 
9. <script> 
10. import { ref, computed } from "vue" 
11. export default{ 
12.  setup(){ 
13.   const num1 = ref(1) 
14.   const num2 = ref(1) 
15.   let sum = computed(()=>{ 
16.    return num1.value + num2.value 
17.   }) 
18.   return{ 
19.    num1, 
20.    num2, 
21.    sum 
22.   } 
23.  } 
24. } 
25. </script> 

完整實例2：

1. <template> 
2.  <div> 
3.   {{num1}} + {{num2}} = {{sum}}<br> 
4.   <button @click="num1++">num1自加</button> 
5.   <button @click="num2++">num2自加</button> 
6.   <br> 
7.   {{num1}} * 10 = {{mul}} 
8.   <button @click="mul=100">改值</button> 
9.  </div> 
10. </template> 
11. <script> 
12. import { ref, computed } from "vue" 
13. export default{ 
14.  setup(){ 
15.   const num1 = ref(1) 
16.   const num2 = ref(1) 
17.  
18.   let sum = computed(()=>{ 
19.    return num1.value + num2.value 
20.   }) 
21.   let mul = computed({ 
22.    get:()=>{ 
23.     return num1.value *10 
24.    }, 
25.    set:(value)=>{ 
26.     return num1.value = value/10 
27.    } 
28.   }) 
29.   return{ 
30.    num1, 
31.    num2, 
32.    sum, 
33.    mul 
34.   } 
35.  } 
36. } 
37. </script> 

三、computed 傳參

計算屬性需要傳入一個參數怎么寫呢?

1. <template> 
2.  <div> 
3.   <div v-for="(item,index) in arr" :key="index" @click="sltEle(index)"> 
4.    {{item}} 
5.   </div> 
6.  </div> 
7. </template> 
8. <script> 
9. import { ref, computed,reactive } from "vue" 
10. export default{ 
11.  setup(){ 
12.   const arr = reactive([ 
13.    '哈哈','嘿嘿' 
14.   ]) 
15.   const sltEle = computed( (index)=>{ 
16.    console.log('index',index);   
17.   }) 
18.   return{ 
19.    arr,sltEle 
20.   } 
21.  } 
22. } 
23. </script> 

直接這樣寫，運行的時候，出現錯誤：Uncaught TypeError: $setup.sltEle is not a function。

原因：

computed 計算屬性并沒有給定返回值，我們調用的是一個函數，而 computed 內部返回的并不是一個函數，所以就會報錯：sltEle is not a function。

解決辦法：

需要在計算屬性 內部返回一個函數。修改代碼如下：

1. const sltEle = computed( ()=>{ 
2.  return function(index){ 
3.   console.log('index',index); 
4.  } 
5. }) 

原文鏈接：https://www.toutiao.com/a7031386537065611806/