Vue3前端開(kāi)發(fā)，computed計(jì)算屬性的基礎(chǔ)練習(xí)！
在新版里面，和傳統(tǒng)的vue2一樣，計(jì)算屬性，都是對(duì)一些數(shù)據(jù)運(yùn)算進(jìn)行了封裝操作。返回結(jié)果是一個(gè)實(shí)時(shí)監(jiān)控的效果。區(qū)別在于，寫(xiě)法不同。效果是一樣。
下面給大家展示一個(gè)簡(jiǎn)單的案例。
<script setup>
import {ref} from 'vue'
import {computed} from 'vue'
const product_count = ref(0)
const totalPrice = computed(
()=>{
return product_count.value *10
}
)
const addCount=()=>{
product_count.value++
}
const subCount= ()=>{
product_count.value--
}
</script>
<template>
<p>當(dāng)前草莓單價(jià):10元/斤</p>
<p>購(gòu)物車(chē)數(shù)量:{{ product_count }}</p>
<button @click="addCount">+1</button>
<hr />
<button @click="subCount">-1</button>
<p>貨款總額:{{ totalPrice }}</p>
</template>如圖，自定義一個(gè)組件，ComputedDemo.vue。里面有2個(gè)按鈕，一個(gè)增加購(gòu)物車(chē)的貨品數(shù)量，一個(gè)設(shè)計(jì)減少貨物數(shù)量。單價(jià)我們寫(xiě)死了，固定單價(jià)是10元/斤。
我們定義了一個(gè)計(jì)算屬性。叫做：總貨價(jià)格。每次當(dāng)我們點(diǎn)擊按鈕修改貨物數(shù)量的時(shí)候，就會(huì)偵聽(tīng)到數(shù)據(jù)的變化，自動(dòng)幫我們計(jì)算出來(lái)新的總貨價(jià)格。
如圖，貨物數(shù)量為4的時(shí)候，下面顯示了，貨款總額是40元。減法也是可以正常實(shí)現(xiàn)的。
題外話：
計(jì)算屬性，不應(yīng)該參與異步操作，也不應(yīng)該去產(chǎn)生副作用。副作用，指的是，它不能去修改業(yè)務(wù)邏輯里面的參數(shù)內(nèi)容。在我們的這個(gè)案例里面，計(jì)算屬性，僅僅只是做一個(gè)簡(jiǎn)單的運(yùn)算操作。它不能去干擾我們傳入的（貨物數(shù)量）。貨物數(shù)量的變化，應(yīng)該交給其他的功能去實(shí)現(xiàn)！這不是計(jì)算屬性應(yīng)該關(guān)心的事情。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-802112.html
計(jì)算屬性，也不應(yīng)該去修改dom的內(nèi)容。它的職責(zé)是單一的，就是單純的通過(guò)一個(gè)邏輯運(yùn)算，反饋給我們一個(gè)結(jié)果。就ok了。如果想發(fā)生異步操作，或者修改dom等事情，需要交給其他的函數(shù)去執(zhí)行。比如，watch.就是用來(lái)偵聽(tīng)數(shù)據(jù)變化的。我們后面會(huì)給出相應(yīng)的案例。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-802112.html
到了這里，關(guān)于Vue3前端開(kāi)發(fā)，computed計(jì)算屬性的基礎(chǔ)練習(xí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
