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
})
該示例過于簡(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)文章
這篇文章主要為大家詳細(xì)介紹了Vue列表頁渲染優(yōu)化的操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
Vue3+TypeScript+Vite使用require動(dòng)態(tài)引入圖片等靜態(tài)資源
本文主要介紹了Vue3+TypeScript+Vite使用require動(dòng)態(tài)引入圖片等靜態(tài)資源，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
本篇文章主要介紹了Vue三層嵌套路由的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue.js實(shí)現(xiàn)數(shù)據(jù)雙向綁定的代碼示例
在我們使用vue的時(shí)候,當(dāng)數(shù)據(jù)發(fā)生了改變,界面也會(huì)跟著更新,但這并不是理所當(dāng)然的,我們修改數(shù)據(jù)的時(shí)候vue是如何監(jiān)聽數(shù)據(jù)的改變以及當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候vue如何讓界面刷新的,所以本文就給大家講講Vue.js 數(shù)據(jù)雙向綁定是如何實(shí)現(xiàn)的2023-07-07
這篇文章主要介紹了vue配置代理服務(wù)器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue+freemarker中遇到的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章介紹了Vue發(fā)送ajax請(qǐng)求的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
Vue動(dòng)畫事件詳解及過渡動(dòng)畫實(shí)例
通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過渡效果。Vue.js 會(huì)在適當(dāng)?shù)臅r(shí)機(jī)為你觸發(fā) CSS 過渡或動(dòng)畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06