[[439236]]

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

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

一、函數(shù)式寫(xiě)法

在vue2中，computed 寫(xiě)法：

computed:{ 
 sum(){ 
  return this.num1+ this.num2 
 } 
} 

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

示例1：求和

import { ref, computed } from "vue" 
export default{ 
 setup(){ 
  const num1 = ref(1) 
  const num2 = ref(1) 
  let sum = computed(()=>{ 
   return num1.value + num2.value 
  }) 
 } 
} 

 調(diào)用 computed 時(shí)， 傳入了一個(gè)箭頭函數(shù)，返回值作為 sum 。相比之前，使用更加簡(jiǎn)單了。如果需要計(jì)算多個(gè)屬性值，直接調(diào)用就可以。如：

let sum = computed(()=>{ 
 return num1.value + num2.value 
 }) 
let mul = computed(()=>{ 
 return num1.value * num2.value 
 }) 

 該示例過(guò)于簡(jiǎn)單，看不明白的可在文章后面閱讀完整實(shí)例1。

二、options 寫(xiě)法

計(jì)算屬性默認(rèn)只有 getter ，在需要的時(shí)候也可以提供 setter 。在vue2中用法如下：

computed:{ 
 mul:{ 
  get(){ // num1值改變時(shí)觸發(fā) 
   return this.num1 * 10 
  }, 
  set(value){ // mul值被改變時(shí)觸發(fā) 
   this.num1 = value /10 
  } 
 } 
} 

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

在 vue3 中 ：

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

 這兩種寫(xiě)法不太一樣，仔細(xì)觀察區(qū)別不大，get 和 set 調(diào)用也是一樣的。

在此示例中代碼簡(jiǎn)單，如果沒(méi)太理解，可查看文章后面的完整實(shí)例2。

完整實(shí)例1：

<template> 
 <div> 
  {{num1}} + {{num2}} = {{sum}} 
  <br> 
  <button @click="num1++">num1自加</button> 
  <button @click="num2++">num2自加</button> 
 </div> 
</template> 
<script> 
import { ref, computed } from "vue" 
export default{ 
 setup(){ 
  const num1 = ref(1) 
  const num2 = ref(1) 
  let sum = computed(()=>{ 
   return num1.value + num2.value 
  }) 
  return{ 
   num1, 
   num2, 
   sum 
  } 
 } 
} 
</script> 

 完整實(shí)例2：

<template> 
 <div> 
  {{num1}} + {{num2}} = {{sum}}<br> 
  <button @click="num1++">num1自加</button> 
  <button @click="num2++">num2自加</button> 
  <br> 
  {{num1}} * 10 = {{mul}} 
  <button @click="mul=100">改值</button> 
 </div> 
</template> 
<script> 
import { ref, computed } from "vue" 
export default{ 
 setup(){ 
  const num1 = ref(1) 
  const num2 = ref(1) 
 
  let sum = computed(()=>{ 
   return num1.value + num2.value 
  }) 
  let mul = computed({ 
   get:()=>{ 
    return num1.value *10 
   }, 
   set:(value)=>{ 
    return num1.value = value/10 
   } 
  }) 
  return{ 
   num1, 
   num2, 
   sum, 
   mul 
  } 
 } 
} 
</script> 

三、computed 傳參

計(jì)算屬性需要傳入一個(gè)參數(shù)怎么寫(xiě)呢?

<template> 
 <div> 
  <div v-for="(item,index) in arr" :key="index" @click="sltEle(index)"> 
   {{item}} 
  </div> 
 </div> 
</template> 
<script> 
import { ref, computed,reactive } from "vue" 
export default{ 
 setup(){ 
  const arr = reactive([ 
   '哈哈','嘿嘿' 
  ]) 
  const sltEle = computed( (index)=>{ 
   console.log('index',index);   
  }) 
  return{ 
   arr,sltEle 
  } 
 } 
} 
</script> 

直接這樣寫(xiě)，運(yùn)行的時(shí)候，出現(xiàn)錯(cuò)誤：Uncaught TypeError: $setup.sltEle is not a function。

原因：

computed 計(jì)算屬性并沒(méi)有給定返回值，我們調(diào)用的是一個(gè)函數(shù)，而 computed 內(nèi)部返回的并不是一個(gè)函數(shù)，所以就會(huì)報(bào)錯(cuò)：sltEle is not a function。

解決辦法：

需要在計(jì)算屬性 內(nèi)部返回一個(gè)函數(shù)。修改代碼如下：

const sltEle = computed( ()=>{ 
 return function(index){ 
  console.log('index',index); 
 } 
})