vue3?中?computed?新用法示例小結(jié)
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的選項(xiàng)式API，所以可以直接使用 vue2的寫法，這篇文章主要介紹 vue3 中 computed 的新用法，對(duì)比 vue2 中的寫法，讓您快速掌握 vue3 中 computed 的新用法。
組合式 API 中使用 computed 時(shí)，需要先引入：import { computed } from "vue"。引入之后 computed 可以傳入的參數(shù)有兩種：回調(diào)函數(shù)和 options 。具體看看它是如何使用的？
一、函數(shù)式寫法
在vue2中，computed 寫法：
computed:{
sum(){
return this.num1+ this.num2
}
}
在vue3 如果使用選項(xiàng)式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
})
}
}
調(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 寫法
計(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
}
})
這兩種寫法不太一樣，仔細(xì)觀察區(qū)別不大，get 和 set 調(diào)用也是一樣的。
在此示例中代碼簡(jiǎn)單，如果沒太理解，可查看文章后面的完整實(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ù)怎么寫呢？
<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>
直接這樣寫，運(yùn)行的時(shí)候，出現(xiàn)錯(cuò)誤：Uncaught TypeError: $setup.sltEle is not a function。
原因：
computed 計(jì)算屬性并沒有給定返回值，我們調(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);
}
})
到此這篇關(guān)于vue3 中 computed 新用法的文章就介紹到這了,更多相關(guān)vue3 computed 用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
TypeScript踩坑之TS7053的問(wèn)題及解決
這篇文章主要介紹了TypeScript踩坑之TS7053的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下2023-11-11
v-slot和slot、slot-scope之間相互替換實(shí)例
這篇文章主要介紹了v-slot和slot、slot-scope之間相互替換實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由
本文主要介紹了Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由，，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue3中element-plus全局使用Icon圖標(biāo)的過(guò)程詳解
我們?cè)谟胿ue開發(fā)網(wǎng)站的時(shí)候,往往圖標(biāo)是起著很重要的作,這篇文章主要給大家介紹了關(guān)于Vue3中element-plus全局使用Icon圖標(biāo)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了Vue的樣式綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Axios?是一個(gè)基于?promise?的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和?node.js，是一個(gè)第三方插件，第三方異步請(qǐng)求工具庫(kù)，這篇文章主要介紹了Axios在vue項(xiàng)目中的封裝方法,需要的朋友可以參考下2022-10-10
Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3中g(shù)etCurrentInstance、頁(yè)面中route和router的獲取實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
從零到一詳聊創(chuàng)建Vue工程及遇到的常見問(wèn)題
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見問(wèn)題 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue webpack開發(fā)訪問(wèn)后臺(tái)接口全局配置的方法
今天小編就為大家分享一篇vue webpack開發(fā)訪問(wèn)后臺(tái)接口全局配置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09