vue 3 學習筆記 (七)——vue3 中 computed 新用法

前端人發表於2021-11-25
Vue筆記

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

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

一、函式式寫法

在vue2中，computed 寫法：

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

 

在vue3 如果使用選項式API也可以這樣寫，主要看下組合式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
  })
 }
}

 

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

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

 

該示例過於簡單，看不明白的可在文章後面閱讀完整例項1。

二、options 寫法

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

computed:{
 mul:{
  get(){ // num1值改變時觸發
   return this.num1 * 10
  },
  set(value){ // mul值被改變時觸發
   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
 }
})

 

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

在此示例中程式碼簡單，如果沒太理解，可檢視文章後面的完整例項2。

完整例項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>

 

完整例項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 傳參

計算屬性需要傳入一個引數怎麼寫呢？

<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>

 

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

原因：

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

解決辦法：

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

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

好了小編今天的文章就到此結束了，喜歡我的可以點個關注哦！

相關文章