Vue計算屬性computed怎么應(yīng)用
本文小編為大家詳細(xì)介紹“Vue計算屬性computed怎么應(yīng)用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue計算屬性computed怎么應(yīng)用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名與空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、湖濱網(wǎng)站維護(hù)、網(wǎng)站推廣。
Vue中的計算屬性是所有屬性的計算，而這些計算都是變向的在過濾值，通過數(shù)據(jù)的不斷變化計算出來不同的值和操作不同的方法. 而在Vue中，會使用到計算屬性的場景常見的有：
模板內(nèi)的表達(dá)式
屬性
v-bind里可以進(jìn)行的表達(dá)式。指令中可以進(jìn)行的表達(dá)式
以上三者的主要優(yōu)勢是簡潔。如果只是一個小操作，比如說一些簡單的數(shù)值++，字符拼接，三元表達(dá)式，那么使用相當(dāng)方便。當(dāng)然，以上方式也有自己的劣勢。一旦要處理的邏輯復(fù)雜，代碼量就會變得大得多，而且難于維護(hù)。比如說用到if語句來控制流程。那么這個時候可能會想到用filter，咱們來看一個簡單的示例。
<div id="app">
<button @click="count++">{{count + '分'}}</button>
<div>
<input v-model="message" />
</div>
<p>{{ message.split(' ').reverse().join(' ') }}</p>
</div>let app = new Vue({
el: '#app',
data () {
return {
count: 0,
message: ''
}
}
})效果如下：
從上面的示例中我們可以看出：
我們在模板內(nèi)使用字符串拼接，
{{count + '分'}}通過
v-bind指定綁定了一個click事件，它只做了一件事情，就是count++，button每點擊一次，count值增加1，注意，這里并沒有使用methodsinput通過v-model做了數(shù)據(jù)雙向綁定，綁定了message，并且在p標(biāo)簽中對message字符串進(jìn)行反轉(zhuǎn)。
在p標(biāo)簽中對message進(jìn)行計算轉(zhuǎn)換的時候，是不是覺得語義不是很強烈，那么用什么辦法更好呢？這就需要我們使用到前面提到的filter。
使用 filter
我們可以使用filter來修改前面的示例。事實下，在Vue中使用filter具有自己的優(yōu)勢，也具有自己的劣勢：
優(yōu)勢：
filter給我們用于計算和過濾一些模板表達(dá)式和v-bind屬性表達(dá)式一些弊端的地方進(jìn)行計算，他們會返回當(dāng)前計算的值，可以進(jìn)行傳參在多地方共用這個過濾方法劣勢：如果我們要計算多個數(shù)據(jù)不同變化結(jié)合而成的地方，那么filter就比較難過濾到了，本質(zhì)上filter就是一個一對一的行為，對單個數(shù)據(jù)進(jìn)行過濾，可以進(jìn)行傳參，同方法，但不同參
把上面的示例，用filter修改之后就像下面這樣：
<div id="app">
<button @click="count++">{{count + '分'}}</button>
<div>
<input v-model="message" />
</div>
<p>{{ message | reverseString }}</p>
</div>
let app = new Vue({
el: '#app',
data () {
return {
count: 0,
message: ''
}
},
filters: {
reverseString (value) {
if (!value) return ''
value = value.split('').reverse().join('')
return value
}
}
})在這個示例中，我們使用filter來實現(xiàn)，很明顯代碼量多了那么一點點，但整體的語意化就變得相當(dāng)明顯了，讓人一看這里就要進(jìn)行一些過濾計算，看到reverseString就知道是字符串反轉(zhuǎn)。
computed
前面說了這么多，其實我們都是為了給computed的應(yīng)用場景做一個鋪墊。那問題又來了，computed可以做些什么？又能應(yīng)用于什么場景呢？
Vue中的computed其實規(guī)避了模板語法和filter兩個所有的劣勢，他的優(yōu)勢在于通過計算所有依賴的數(shù)據(jù)進(jìn)行計算，然后返回一個值，記住可以依賴方法里所有的數(shù)據(jù)，只要一個數(shù)據(jù)發(fā)生變化，則會重新計算，來更新視圖的改變。是不是很意思，迫切的想知道它是怎么玩。
咱們還是拿使用場景來說事吧。先給大家演示一個簡單實用的應(yīng)用場景，后面再做一個更好玩一點的應(yīng)用場景。
大家是否還記得，我們在玩微博的時候，發(fā)微博會有一個字?jǐn)?shù)限制，比如說只限輸入140個字符。為了讓用戶體驗更好，在文本域中輸入內(nèi)容的時候，同時有一個提示信息，告訴用戶你還能輸入多少字符。那么使用Vue來做這樣的事情就會顯得容易的多。比如下面這個示例：
<div id="app">
<div class="twitter">
<img :src="imgUrl" />
<div class="content">
<textarea v-model="content" :maxlength="totalcount">有什么新鮮事情？</textarea>
<p>您還可以輸入{{ reduceCount }}字</p>
</div>
</div>
</div>
let app = new Vue({
el: '#app',
data () {
return {
imgUrl: '//pbs.twimg.com/profile_images/468783022687256577/eKHcWEIk_normal.jpeg',
totalcount: 140, // 總共只給輸入140字
content: ''
}
},
computed: {
reduceCount () {
return this.totalcount - this.content.length
}
}
})效果如下：
你可以嘗試在文本域中輸入內(nèi)容，你將體驗的效果類似下圖一樣：
在computed創(chuàng)建了一個reduceCount，一直在監(jiān)聽文字的字符長度，來再次進(jìn)行計算，返回值給視圖，讓視圖進(jìn)行變化。這也是一個很簡單的示例。前面也提到過，我們可以監(jiān)聽多個數(shù)據(jù)，只要一個數(shù)據(jù)變了，整個方法就會重新計算，然后反饋到視圖，這個方法只是一個簡單的應(yīng)用。咱們再來看一個示例，這樣會更好的幫助我們理解。
這個示例是一個足球比賽記分的示例。簡單的對示例進(jìn)行分析：
比賽時間，用
time來維護(hù)比賽雙方的進(jìn)球數(shù)，用對象
team來維護(hù)比賽的播報情況，在90分鐘內(nèi)，要顯示中國領(lǐng)先或者韓國領(lǐng)先或者雙方僵持，如果到了90分鐘我們要顯示中國隊贏還是韓國隊贏，還是平局
第三個數(shù)據(jù)相對而言比較復(fù)雜，也是比較關(guān)鍵的數(shù)據(jù)。那么我們用什么方式來維護(hù)，可以說比賽情況是多樣化的，用一個數(shù)據(jù)去定死，這樣不符合我們的場景。那么我們先列出將會改變的地方：
我們需要檢測雙方的進(jìn)球數(shù)
通過時間來比對，確定比賽是否結(jié)果，然后顯示對應(yīng)的方案
這樣我們就要不斷的監(jiān)聽兩個維護(hù)的數(shù)據(jù)，一是比賽時間，二是比賽兩隊進(jìn)球數(shù)。
<div id="app">
<h2>比賽時間：{{ time }}s</h2>
<h3>直播播報：{{ result }}</h3>
<div class="team">
<div>
<span>中國隊進(jìn)球數(shù)：{{ team.china }}</span>
<button @click="team.china++">點擊中國隊進(jìn)一球</button>
</div>
<div>
<span>韓國隊進(jìn)球數(shù)：{{ team.korea }}</span>
<button @click="team.korea++">點擊韓國隊進(jìn)一球</button>
</div>
</div>
</div>
let app = new Vue({
el: '#app',
data () {
return {
time: 0,
team: {
china: 0,
korea: 0
}
}
},
created () {
let time = setInterval(() => {
this.time++
if (this.time == 90) {
clearInterval(time)
}
}, 1000)
},
computed: {
result () {
if (this.time < 90) {
if (this.team.china > this.team.korea) {
return '中國隊領(lǐng)先'
} else if (this.team.china < this.team.korea) {
return '韓國領(lǐng)先'
} else {
return '雙方僵持'
}
} else {
if (this.team.china > this.team.korea) {
return '中國隊贏'
} else if (this.team.china < this.team.korea) {
return '韓國隊贏'
} else {
return '平局'
}
}
}
}
})看到的效果如下：
注：這里時間90分鐘是一個寫死的時間值。如果要讓Demo更為完美，這個時間我們可以寫一個90分鐘的倒計時效果。如果你感興趣的話，可以自己動手修改上面的Demo，然后在下面的評論中與我們一起分享。
這個示例中，用了點擊事件來進(jìn)行雙方進(jìn)球數(shù)，這個Demo幫助我們能能更充分的理解Vue中的computed的含義。說到底是觀察一個或多個數(shù)據(jù)，每當(dāng)其中一個數(shù)據(jù)改變的時候，這個函數(shù)就會重新計算，還有就是通過觀察所有數(shù)據(jù)來維護(hù)一個狀態(tài)，就是所謂的返回一個狀態(tài)值。從上面這個Demo，我們就可以很容易的知道computed到底用在什么場景，如何去維護(hù)返回一個多狀態(tài)的場景。
methods vs computed
在Vue中，使用methods可以做computed同樣的事情，不同的是，computed可以進(jìn)行緩存。什么意思呢？就是在上個例子中我們對比賽時間和兩個球隊的進(jìn)球數(shù)進(jìn)行了檢測數(shù)據(jù)。如果隨著時間的改變，但是球數(shù)沒動，對于computed來說只會重新計算這個球數(shù)，進(jìn)入緩存，而不會再次計算，而重新計算的是這個時間，而且頁面的DOM更新也會觸發(fā)methods來重新計算屬性。所以，如果不想讓計算屬性進(jìn)入緩存，請使用methods，但我個人更推薦使用computed，語義化會更好一點。畢竟是什么選項里就應(yīng)該做什么事，methods里面就是應(yīng)該來管事件的。
computed vs watch
computed和watch都可以做同一件事，就像跑步運動員都可以跑步，但是分100米和1000米，術(shù)業(yè)有專攻嘛，兩個選項都是對數(shù)據(jù)進(jìn)行時時監(jiān)聽，但是兩個的適用場景就不一樣了：
computed前面說了是適用于對多數(shù)據(jù)變動進(jìn)行監(jiān)聽，然后來維護(hù)一個狀態(tài)，就是返回一個狀態(tài)wacth是對一個數(shù)據(jù)監(jiān)聽，在數(shù)據(jù)變化時，會返回兩個值，一個是value(當(dāng)前值)，二是oldvalue是變化前的值
我們可以通過這些變化也可以去維護(hù)一個狀態(tài)，但是不符合場景。那么watch主要用于什么地方呢？其主要用于監(jiān)聽一個數(shù)據(jù)來進(jìn)行復(fù)雜的邏輯操作。
<div id="app">
<h2>比賽時間：{{ time }}s</h2>
<h3>直播播報：{{ result }}</h3>
<div class="team">
<div>
<span>中國隊進(jìn)球數(shù)：{{ team.china }}</span>
<button @click="team.china++">點擊中國隊進(jìn)一球</button>
</div>
<div>
<span>韓國隊進(jìn)球數(shù)：{{ team.korea }}</span>
<button @click="team.korea++">點擊韓國隊進(jìn)一球</button>
</div>
</div>
</div>
let app = new Vue({
el: '#app',
data () {
return {
time: 0,
team: {
china: 0,
korea: 0
},
result: '雙方僵持'
}
},
created () {
let time = setInterval(() => {
this.time++
if (this.time == 90) {
clearInterval(time)
}
}, 1000)
},
wacth: {
time (value, oldval) {
if (value < 90) {
if (this.team.china > this.team.korea) {
this.result = '中國隊領(lǐng)先'
} else if (this.team.china < this.team.korea) {
this.result = '韓國隊領(lǐng)先'
} else {
this.result = '雙方僵持'
}
} else {
if (this.team.china > this.team.korea) {
this.result = '中國隊贏'
} else if (this.team.chian < this.team.korea) {
this.result = '韓國隊贏'
} else {
this.result = '平局'
}
}
},
team (value, oldval) {
if (this.time < 90) {
if (value.china > value.korea) {
this.result = '中國隊領(lǐng)先'
} else if (value.china < value.korea) {
this.result = '韓國隊領(lǐng)先'
} else {
this.result = '雙方僵持'
}
} else {
if (value.china > value.korea) {
this.result = '中國隊贏'
} else if(value.chian < value.korea) {
this.result = '韓國隊贏'
} else {
this.result = '平局'
}
}
}
}
})以上代碼和computed產(chǎn)生的效果是一模一樣，但是很明顯，就像我對computed和watch闡述過了應(yīng)用場景，這個場景只是維護(hù)了一個比賽狀態(tài)，而不牽扯到邏輯操作。雖然也能完成，但無論從代碼量的比對還是可讀性，還是可維護(hù)性的都不勝于computed。但說到底誰更強大呢？我還是老實說watch更強大，哪里有然他有場景的局限性，但是他可以做牽扯到計算屬性的一切操作，缺點是watch只能一個一個監(jiān)聽。
watch應(yīng)用場景
我相信圖片預(yù)加載大家肯定都有接觸過，當(dāng)圖片量大的時候，為了保證頁面圖片都加載出來的時候，才渲染頁面，再進(jìn)行一些 Ajax請求，或者邏輯操作。那些時你用computed對這種監(jiān)聽一個數(shù)據(jù)然后進(jìn)行一系列邏輯操作和Ajax請求，那watch再適合不過了，如果用computed的話，那是無法實現(xiàn)的。
<template>
<div v-show=show>
<img src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg" alt="">
<img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
<img src="https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg" alt="">
<img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
</div>
</template>
<script>
export default {
mounted () {
var _this = this
let imgs = document.querySelectorAll('img')
console.log(imgs)
Array.from(imgs).forEach((item)=>{
let img = new Image()
img.onload = ()=>{
this.count++
}
img.src=item.getAttribute('src')
})
},
data () {
return {
count : 0,
show : false
}
},
watch : {
count (val,oldval) {
if(val == 4){
this.show = true
alert("加載完畢")
//然后可以對后臺發(fā)送一些ajax操作
}
}
}
}
</script>我們可以發(fā)現(xiàn)四張圖片都加載完畢的時候，頁面才渲染出來。
Vue官方有一句話說得很重要：
雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的
watcher。這是為什么Vue提供一個更通用的方法，使用wacth來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時，執(zhí)行異步操作或開銷較大的操作，這是很有用的。
基于這個描述，我對computed和watch的總結(jié)：
computed：監(jiān)聽多個數(shù)據(jù)或者一個數(shù)據(jù)來維護(hù)返回一個狀態(tài)值，只要其中一個或多個數(shù)據(jù)發(fā)生了變化，則會重新計算整個函數(shù)體，重新返回狀態(tài)值watch：只能一個一個監(jiān)聽數(shù)據(jù)，只要這個數(shù)據(jù)發(fā)生變化，就會返回兩個參數(shù)，第一個是當(dāng)前的值，第二個是變化前的值。每當(dāng)變化的時候，則會觸發(fā)函數(shù)體的邏輯行為，根據(jù)邏輯行為做后續(xù)的操作
其實，computed、watch這幾個都不是有多難，如果從表層上來說都很易理解，但從深層面上看，很多時候還是會存在問題。比如說會濫用，混用。
讀到這里，這篇“Vue計算屬性computed怎么應(yīng)用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文題目：Vue計算屬性computed怎么應(yīng)用
轉(zhuǎn)載注明：http://chinadenli.net/article38/gshgsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、動態(tài)網(wǎng)站、企業(yè)建站、做網(wǎng)站、網(wǎng)站設(shè)計公司、域名注冊
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- APP開發(fā)與網(wǎng)站建設(shè)開發(fā)有啥區(qū)別 2023-03-27
- 母嬰類APP開發(fā)將開辟更廣闊的發(fā)展空間 2022-11-20
- APP開發(fā)制作：開發(fā)一款商城類的APP需要多少錢？ 2023-03-04
- 八里莊app開發(fā)公司 2021-08-26
- 山東服裝APP開發(fā)如何跟隨潮流？ 2020-12-31
- 安貞app開發(fā)公司 2022-05-01
- APP開發(fā)一定要避免的四大誤區(qū)-佛山APP開發(fā) 2022-11-01
- APP開發(fā)：如何找到一個靠譜的APP開公司 2020-11-20
- 在成都APP開發(fā)中必須避免的幾個錯誤 2022-08-26
- 上海app開發(fā)之時尚穿搭為用戶提供方便 2023-03-28
- 創(chuàng)新互聯(lián)APP開發(fā)公司,JAVA電商平臺開發(fā) 2022-07-31
- 北京APP開發(fā)公司都有哪些設(shè)計崗位？ 2023-02-28