Vue計(jì)算屬性computed怎么應(yīng)用

本文小編為大家詳細(xì)介紹“Vue計(jì)算屬性computed怎么應(yīng)用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue計(jì)算屬性computed怎么應(yīng)用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、湖濱網(wǎng)站維護(hù)、網(wǎng)站推廣。

Vue中的計(jì)算屬性是所有屬性的計(jì)算，而這些計(jì)算都是變向的在過(guò)濾值，通過(guò)數(shù)據(jù)的不斷變化計(jì)算出來(lái)不同的值和操作不同的方法. 而在Vue中，會(huì)使用到計(jì)算屬性的場(chǎng)景常見(jiàn)的有：

模板內(nèi)的表達(dá)式
屬性v-bind里可以進(jìn)行的表達(dá)式。
指令中可以進(jìn)行的表達(dá)式

以上三者的主要優(yōu)勢(shì)是簡(jiǎn)潔。如果只是一個(gè)小操作，比如說(shuō)一些簡(jiǎn)單的數(shù)值++，字符拼接，三元表達(dá)式，那么使用相當(dāng)方便。當(dāng)然，以上方式也有自己的劣勢(shì)。一旦要處理的邏輯復(fù)雜，代碼量就會(huì)變得大得多，而且難于維護(hù)。比如說(shuō)用到if語(yǔ)句來(lái)控制流程。那么這個(gè)時(shí)候可能會(huì)想到用filter，咱們來(lái)看一個(gè)簡(jiǎn)單的示例。

<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: ''
        }
    }
})

效果如下：

從上面的示例中我們可以看出：

我們?cè)谀０鍍?nèi)使用字符串拼接，{{count + '分'}}
通過(guò)v-bind指定綁定了一個(gè)click事件，它只做了一件事情，就是count++，button每點(diǎn)擊一次，count值增加1，注意，這里并沒(méi)有使用methods
input通過(guò)v-model做了數(shù)據(jù)雙向綁定，綁定了message，并且在p標(biāo)簽中對(duì)message字符串進(jìn)行反轉(zhuǎn)。

在p標(biāo)簽中對(duì)message進(jìn)行計(jì)算轉(zhuǎn)換的時(shí)候，是不是覺(jué)得語(yǔ)義不是很強(qiáng)烈，那么用什么辦法更好呢？這就需要我們使用到前面提到的filter。

使用 filter

我們可以使用filter來(lái)修改前面的示例。事實(shí)下，在Vue中使用filter具有自己的優(yōu)勢(shì)，也具有自己的劣勢(shì)：

優(yōu)勢(shì)：filter給我們用于計(jì)算和過(guò)濾一些模板表達(dá)式和v-bind屬性表達(dá)式一些弊端的地方進(jìn)行計(jì)算，他們會(huì)返回當(dāng)前計(jì)算的值，可以進(jìn)行傳參在多地方共用這個(gè)過(guò)濾方法
劣勢(shì)：如果我們要計(jì)算多個(gè)數(shù)據(jù)不同變化結(jié)合而成的地方，那么filter就比較難過(guò)濾到了，本質(zhì)上filter就是一個(gè)一對(duì)一的行為，對(duì)單個(gè)數(shù)據(jù)進(jìn)行過(guò)濾，可以進(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
        }
    }
})

在這個(gè)示例中，我們使用filter來(lái)實(shí)現(xiàn)，很明顯代碼量多了那么一點(diǎn)點(diǎn)，但整體的語(yǔ)意化就變得相當(dāng)明顯了，讓人一看這里就要進(jìn)行一些過(guò)濾計(jì)算，看到reverseString就知道是字符串反轉(zhuǎn)。

computed

前面說(shuō)了這么多，其實(shí)我們都是為了給computed的應(yīng)用場(chǎng)景做一個(gè)鋪墊。那問(wèn)題又來(lái)了，computed可以做些什么？又能應(yīng)用于什么場(chǎng)景呢？

Vue中的computed其實(shí)規(guī)避了模板語(yǔ)法和filter兩個(gè)所有的劣勢(shì)，他的優(yōu)勢(shì)在于通過(guò)計(jì)算所有依賴(lài)的數(shù)據(jù)進(jìn)行計(jì)算，然后返回一個(gè)值，記住可以依賴(lài)方法里所有的數(shù)據(jù)，只要一個(gè)數(shù)據(jù)發(fā)生變化，則會(huì)重新計(jì)算，來(lái)更新視圖的改變。是不是很意思，迫切的想知道它是怎么玩。

咱們還是拿使用場(chǎng)景來(lái)說(shuō)事吧。先給大家演示一個(gè)簡(jiǎn)單實(shí)用的應(yīng)用場(chǎng)景，后面再做一個(gè)更好玩一點(diǎn)的應(yīng)用場(chǎng)景。

大家是否還記得，我們?cè)谕嫖⒉┑臅r(shí)候，發(fā)微博會(huì)有一個(gè)字?jǐn)?shù)限制，比如說(shuō)只限輸入140個(gè)字符。為了讓用戶(hù)體驗(yàn)更好，在文本域中輸入內(nèi)容的時(shí)候，同時(shí)有一個(gè)提示信息，告訴用戶(hù)你還能輸入多少字符。那么使用Vue來(lái)做這樣的事情就會(huì)顯得容易的多。比如下面這個(gè)示例：

<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)容，你將體驗(yàn)的效果類(lèi)似下圖一樣：

Vue計(jì)算屬性computed怎么應(yīng)用

在computed創(chuàng)建了一個(gè)reduceCount，一直在監(jiān)聽(tīng)文字的字符長(zhǎng)度，來(lái)再次進(jìn)行計(jì)算，返回值給視圖，讓視圖進(jìn)行變化。這也是一個(gè)很簡(jiǎn)單的示例。前面也提到過(guò)，我們可以監(jiān)聽(tīng)多個(gè)數(shù)據(jù)，只要一個(gè)數(shù)據(jù)變了，整個(gè)方法就會(huì)重新計(jì)算，然后反饋到視圖，這個(gè)方法只是一個(gè)簡(jiǎn)單的應(yīng)用。咱們?cè)賮?lái)看一個(gè)示例，這樣會(huì)更好的幫助我們理解。

這個(gè)示例是一個(gè)足球比賽記分的示例。簡(jiǎn)單的對(duì)示例進(jìn)行分析：

比賽時(shí)間，用time來(lái)維護(hù)
比賽雙方的進(jìn)球數(shù)，用對(duì)象team來(lái)維護(hù)
比賽的播報(bào)情況，在90分鐘內(nèi)，要顯示中國(guó)領(lǐng)先或者韓國(guó)領(lǐng)先或者雙方僵持，如果到了90分鐘我們要顯示中國(guó)隊(duì)贏還是韓國(guó)隊(duì)贏，還是平局

第三個(gè)數(shù)據(jù)相對(duì)而言比較復(fù)雜，也是比較關(guān)鍵的數(shù)據(jù)。那么我們用什么方式來(lái)維護(hù)，可以說(shuō)比賽情況是多樣化的，用一個(gè)數(shù)據(jù)去定死，這樣不符合我們的場(chǎng)景。那么我們先列出將會(huì)改變的地方：

我們需要檢測(cè)雙方的進(jìn)球數(shù)
通過(guò)時(shí)間來(lái)比對(duì)，確定比賽是否結(jié)果，然后顯示對(duì)應(yīng)的方案

這樣我們就要不斷的監(jiān)聽(tīng)兩個(gè)維護(hù)的數(shù)據(jù)，一是比賽時(shí)間，二是比賽兩隊(duì)進(jìn)球數(shù)。

<div id="app">
    <h2>比賽時(shí)間：{{ time }}s</h2>
    <h3>直播播報(bào)：{{ result }}</h3>
    <div class="team">
        <div>
            <span>中國(guó)隊(duì)進(jìn)球數(shù)：{{ team.china }}</span>
            <button @click="team.china++">點(diǎn)擊中國(guó)隊(duì)進(jìn)一球</button>
        </div>
        <div>
            <span>韓國(guó)隊(duì)進(jìn)球數(shù)：{{ team.korea }}</span>
            <button @click="team.korea++">點(diǎn)擊韓國(guó)隊(duì)進(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 '中國(guó)隊(duì)領(lǐng)先'
                } else if (this.team.china < this.team.korea) {
                    return '韓國(guó)領(lǐng)先'
                } else {
                    return '雙方僵持'
                }
            } else {
                if (this.team.china > this.team.korea) {
                    return '中國(guó)隊(duì)贏'
                } else if (this.team.china < this.team.korea) {
                    return '韓國(guó)隊(duì)贏'
                } else {
                    return '平局'
                }
            }
        }
    }
})

看到的效果如下：

注：這里時(shí)間90分鐘是一個(gè)寫(xiě)死的時(shí)間值。如果要讓Demo更為完美，這個(gè)時(shí)間我們可以寫(xiě)一個(gè)90分鐘的倒計(jì)時(shí)效果。如果你感興趣的話(huà)，可以自己動(dòng)手修改上面的Demo，然后在下面的評(píng)論中與我們一起分享。

這個(gè)示例中，用了點(diǎn)擊事件來(lái)進(jìn)行雙方進(jìn)球數(shù)，這個(gè)Demo幫助我們能能更充分的理解Vue中的computed的含義。說(shuō)到底是觀察一個(gè)或多個(gè)數(shù)據(jù)，每當(dāng)其中一個(gè)數(shù)據(jù)改變的時(shí)候，這個(gè)函數(shù)就會(huì)重新計(jì)算，還有就是通過(guò)觀察所有數(shù)據(jù)來(lái)維護(hù)一個(gè)狀態(tài)，就是所謂的返回一個(gè)狀態(tài)值。從上面這個(gè)Demo，我們就可以很容易的知道computed到底用在什么場(chǎng)景，如何去維護(hù)返回一個(gè)多狀態(tài)的場(chǎng)景。

methods vs computed

在Vue中，使用methods可以做computed同樣的事情，不同的是，computed可以進(jìn)行緩存。什么意思呢？就是在上個(gè)例子中我們對(duì)比賽時(shí)間和兩個(gè)球隊(duì)的進(jìn)球數(shù)進(jìn)行了檢測(cè)數(shù)據(jù)。如果隨著時(shí)間的改變，但是球數(shù)沒(méi)動(dòng)，對(duì)于computed來(lái)說(shuō)只會(huì)重新計(jì)算這個(gè)球數(shù)，進(jìn)入緩存，而不會(huì)再次計(jì)算，而重新計(jì)算的是這個(gè)時(shí)間，而且頁(yè)面的DOM更新也會(huì)觸發(fā)methods來(lái)重新計(jì)算屬性。所以，如果不想讓計(jì)算屬性進(jìn)入緩存，請(qǐng)使用methods，但我個(gè)人更推薦使用computed，語(yǔ)義化會(huì)更好一點(diǎn)。畢竟是什么選項(xiàng)里就應(yīng)該做什么事，methods里面就是應(yīng)該來(lái)管事件的。

computed vs watch

computed和watch都可以做同一件事，就像跑步運(yùn)動(dòng)員都可以跑步，但是分100米和1000米，術(shù)業(yè)有專(zhuān)攻嘛，兩個(gè)選項(xiàng)都是對(duì)數(shù)據(jù)進(jìn)行時(shí)時(shí)監(jiān)聽(tīng)，但是兩個(gè)的適用場(chǎng)景就不一樣了：

computed前面說(shuō)了是適用于對(duì)多數(shù)據(jù)變動(dòng)進(jìn)行監(jiān)聽(tīng)，然后來(lái)維護(hù)一個(gè)狀態(tài)，就是返回一個(gè)狀態(tài)
wacth是對(duì)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)，在數(shù)據(jù)變化時(shí)，會(huì)返回兩個(gè)值，一個(gè)是value(當(dāng)前值)，二是oldvalue是變化前的值

我們可以通過(guò)這些變化也可以去維護(hù)一個(gè)狀態(tài)，但是不符合場(chǎng)景。那么watch主要用于什么地方呢？其主要用于監(jiān)聽(tīng)一個(gè)數(shù)據(jù)來(lái)進(jìn)行復(fù)雜的邏輯操作。

<div id="app">
    <h2>比賽時(shí)間：{{ time }}s</h2>
    <h3>直播播報(bào)：{{ result }}</h3>
    <div class="team">
        <div>
            <span>中國(guó)隊(duì)進(jìn)球數(shù)：{{ team.china }}</span>
            <button @click="team.china++">點(diǎn)擊中國(guó)隊(duì)進(jìn)一球</button>
        </div>
        <div>
            <span>韓國(guó)隊(duì)進(jìn)球數(shù)：{{ team.korea }}</span>
            <button @click="team.korea++">點(diǎn)擊韓國(guó)隊(duì)進(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 = '中國(guó)隊(duì)領(lǐng)先'
                } else if (this.team.china < this.team.korea) {
                    this.result = '韓國(guó)隊(duì)領(lǐng)先'
                } else {
                    this.result = '雙方僵持'
                }
            } else {
                if (this.team.china > this.team.korea) {
                    this.result = '中國(guó)隊(duì)贏'
                } else if (this.team.chian < this.team.korea) {
                    this.result = '韓國(guó)隊(duì)贏'
                } else {
                    this.result = '平局'
                }
            }
        },
        team (value, oldval) {
            if (this.time < 90) {
                if (value.china > value.korea) {
                    this.result = '中國(guó)隊(duì)領(lǐng)先'
                } else if (value.china < value.korea) {
                    this.result = '韓國(guó)隊(duì)領(lǐng)先'
                } else {
                    this.result = '雙方僵持'
                }
            } else {
                if (value.china > value.korea) {
                    this.result = '中國(guó)隊(duì)贏'
                } else if(value.chian < value.korea) {
                    this.result = '韓國(guó)隊(duì)贏'
                } else {
                    this.result = '平局'
                }
            }
        }
    }
})

以上代碼和computed產(chǎn)生的效果是一模一樣，但是很明顯，就像我對(duì)computed和watch闡述過(guò)了應(yīng)用場(chǎng)景，這個(gè)場(chǎng)景只是維護(hù)了一個(gè)比賽狀態(tài)，而不牽扯到邏輯操作。雖然也能完成，但無(wú)論從代碼量的比對(duì)還是可讀性，還是可維護(hù)性的都不勝于computed。但說(shuō)到底誰(shuí)更強(qiáng)大呢？我還是老實(shí)說(shuō)watch更強(qiáng)大，哪里有然他有場(chǎng)景的局限性，但是他可以做牽扯到計(jì)算屬性的一切操作，缺點(diǎn)是watch只能一個(gè)一個(gè)監(jiān)聽(tīng)。

watch應(yīng)用場(chǎng)景

我相信圖片預(yù)加載大家肯定都有接觸過(guò)，當(dāng)圖片量大的時(shí)候，為了保證頁(yè)面圖片都加載出來(lái)的時(shí)候，才渲染頁(yè)面，再進(jìn)行一些 Ajax請(qǐng)求，或者邏輯操作。那些時(shí)你用computed對(duì)這種監(jiān)聽(tīng)一個(gè)數(shù)據(jù)然后進(jìn)行一系列邏輯操作和Ajax請(qǐng)求，那watch再適合不過(guò)了，如果用computed的話(huà)，那是無(wú)法實(shí)現(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("加載完畢")
                    //然后可以對(duì)后臺(tái)發(fā)送一些ajax操作
                }
            }
        }
    }
</script>

我們可以發(fā)現(xiàn)四張圖片都加載完畢的時(shí)候，頁(yè)面才渲染出來(lái)。

Vue官方有一句話(huà)說(shuō)得很重要：

雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的watcher。這是為什么Vue提供一個(gè)更通用的方法，使用wacth來(lái)響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí)，執(zhí)行異步操作或開(kāi)銷(xiāo)較大的操作，這是很有用的。

基于這個(gè)描述，我對(duì)computed和watch的總結(jié)：

computed：監(jiān)聽(tīng)多個(gè)數(shù)據(jù)或者一個(gè)數(shù)據(jù)來(lái)維護(hù)返回一個(gè)狀態(tài)值，只要其中一個(gè)或多個(gè)數(shù)據(jù)發(fā)生了變化，則會(huì)重新計(jì)算整個(gè)函數(shù)體，重新返回狀態(tài)值
watch：只能一個(gè)一個(gè)監(jiān)聽(tīng)數(shù)據(jù)，只要這個(gè)數(shù)據(jù)發(fā)生變化，就會(huì)返回兩個(gè)參數(shù)，第一個(gè)是當(dāng)前的值，第二個(gè)是變化前的值。每當(dāng)變化的時(shí)候，則會(huì)觸發(fā)函數(shù)體的邏輯行為，根據(jù)邏輯行為做后續(xù)的操作

其實(shí)，computed、watch這幾個(gè)都不是有多難，如果從表層上來(lái)說(shuō)都很易理解，但從深層面上看，很多時(shí)候還是會(huì)存在問(wèn)題。比如說(shuō)會(huì)濫用，混用。

讀到這里，這篇“Vue計(jì)算屬性computed怎么應(yīng)用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：Vue計(jì)算屬性computed怎么應(yīng)用
轉(zhuǎn)載注明：http://www.chinadenli.net/article38/gshgsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、動(dòng)態(tài)網(wǎng)站、企業(yè)建站、做網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue計(jì)算屬性computed怎么應(yīng)用

使用 filter

computed

methods vs computed

computed vs watch

watch應(yīng)用場(chǎng)景