vue3?中?computed?新用法示例小結(jié)
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的選項式API，所以可以直接使用 vue2的寫法，這篇文章主要介紹 vue3 中 computed 的新用法，對比 vue2 中的寫法，讓您快速掌握 vue3 中 computed 的新用法。
組合式 API 中使用 computed 時，需要先引入：import { computed } from "vue"。引入之后 computed 可以傳入的參數(shù)有兩種：回調(diào)函數(shù)和 options 。具體看看它是如何使用的？
一、函數(shù)式寫法
在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
})
}
}
調(diào)用 computed 時， 傳入了一個箭頭函數(shù)，返回值作為 sum 。相比之前，使用更加簡單了。如果需要計算多個屬性值，直接調(diào)用就可以。如：
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 調(diào)用也是一樣的。
在此示例中代碼簡單，如果沒太理解，可查看文章后面的完整實例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 傳參
計算屬性需要傳入一個參數(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>
直接這樣寫，運行的時候，出現(xiàn)錯誤：Uncaught TypeError: $setup.sltEle is not a function。
原因：
computed 計算屬性并沒有給定返回值，我們調(diào)用的是一個函數(shù)，而 computed 內(nèi)部返回的并不是一個函數(shù)，所以就會報錯：sltEle is not a function。
解決辦法：
需要在計算屬性 內(nèi)部返回一個函數(shù)。修改代碼如下：
const sltEle = computed( ()=>{
return function(index){
console.log('index',index);
}
})
到此這篇關(guān)于vue3 中 computed 新用法的文章就介紹到這了,更多相關(guān)vue3 computed 用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue列表頁渲染優(yōu)化的操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
C#實現(xiàn)將一個字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實現(xiàn)將一個字符轉(zhuǎn)換為整數(shù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
Vue3+TypeScript+Vite使用require動態(tài)引入圖片等靜態(tài)資源
本文主要介紹了Vue3+TypeScript+Vite使用require動態(tài)引入圖片等靜態(tài)資源，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
本篇文章主要介紹了Vue三層嵌套路由的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue.js實現(xiàn)數(shù)據(jù)雙向綁定的代碼示例
在我們使用vue的時候,當數(shù)據(jù)發(fā)生了改變,界面也會跟著更新,但這并不是理所當然的,我們修改數(shù)據(jù)的時候vue是如何監(jiān)聽數(shù)據(jù)的改變以及當數(shù)據(jù)發(fā)生改變的時候vue如何讓界面刷新的,所以本文就給大家講講Vue.js 數(shù)據(jù)雙向綁定是如何實現(xiàn)的2023-07-07
這篇文章主要介紹了vue配置代理服務(wù)器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue+freemarker中遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章介紹了Vue發(fā)送ajax請求的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-01-01
通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時自動應(yīng)用過渡效果。Vue.js 會在適當?shù)臅r機為你觸發(fā) CSS 過渡或動畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作2019-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06