vue3?中?computed?新用法示例小結
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值改變時觸發(fā)
return this.num1 * 10
},
set(value){ // mul值被改變時觸發(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
}
})
這兩種寫法不太一樣，仔細觀察區(qū)別不大，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);
}
})
到此這篇關于vue3 中 computed 新用法的文章就介紹到這了,更多相關vue3 computed 用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了TypeScript踩坑之TS7053的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本文主要介紹了el-form-item表單label添加提示圖標的實現,我們將了解El-Form-Item的基本概念和用法,及添加提示圖標以及如何自定義圖標樣式,感興趣的可以了解一下2023-11-11
v-slot和slot、slot-scope之間相互替換實例
這篇文章主要介紹了v-slot和slot、slot-scope之間相互替換實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹了Vue3中簡單實現動態(tài)添加路由，，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
Vue3中element-plus全局使用Icon圖標的過程詳解
我們在用vue開發(fā)網站的時候,往往圖標是起著很重要的作,這篇文章主要給大家介紹了關于Vue3中element-plus全局使用Icon圖標的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細介紹了Vue的樣式綁定，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Axios?是一個基于?promise?的網絡請求庫，可以用于瀏覽器和?node.js，是一個第三方插件，第三方異步請求工具庫，這篇文章主要介紹了Axios在vue項目中的封裝方法,需要的朋友可以參考下2022-10-10
Vue3中getCurrentInstance、頁面中route和router的獲取實現方式
這篇文章主要介紹了Vue3中getCurrentInstance、頁面中route和router的獲取實現方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見問題 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
vue webpack開發(fā)訪問后臺接口全局配置的方法
今天小編就為大家分享一篇vue webpack開發(fā)訪問后臺接口全局配置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09