快捷導(dǎo)航

Vue中的computed屬性詳解

更新時(shí)間：2022年01月05日 08:49:15 作者：QM.bear!

這篇文章主要為大家介紹了Vue中的computed屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

今天來說說vue中的計(jì)算屬性computed，為了更好的理解計(jì)算屬性的好處，我們先通過一個(gè)案例來慢慢了解計(jì)算屬性，有如下案例：定義兩個(gè)輸入框以及一個(gè)span標(biāo)簽，span標(biāo)簽中的內(nèi)容為兩個(gè)輸入框中的值，span標(biāo)簽中的內(nèi)容隨著輸入框中的內(nèi)容變化而變化

插值表達(dá)式

我們先用插值表達(dá)式的方法來實(shí)現(xiàn)這一效果

<body>
    <div id="app">
        姓: <input type="text" v-model=firstName> </br>
        </br>
        名: <input type="text" v-model=lastName></br>
        </br>
        姓名： <span>{{firstName}}{{lastName}}</span>
?
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            firstName: '張',
            lastName: '三'
        },
        methods: {
        }
    })
?
</script>

我們可以發(fā)現(xiàn)能簡(jiǎn)單實(shí)現(xiàn)我們所需要的效果，但是如果現(xiàn)在我想要添加另外的要求，當(dāng)我輸入的是英文的時(shí)候就將首字母大寫，這個(gè)時(shí)候我們只能使用以下方法

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{firstName.replace(firstName[0],firstName[0].toUpperCase())}}   {{lastName.replace(lastName[0],lastName[0].toUpperCase())}}</span>
?
    </div>
</body>
<script type="text/javascript">
    var str = ''
?
    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        methods: {
        }
    })
</script>

從插值表達(dá)式所展現(xiàn)的情況來看雖然能實(shí)現(xiàn)想要的效果但是代碼顯得特別冗長(zhǎng)不利于閱讀，這個(gè)時(shí)候想到可以向methods中添加方法來實(shí)現(xiàn)這一效果。

methods

向methods添加fullName方法

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{fullName()}}</span>
?
    </div>
</body>
<script type="text/javascript">
    var str = ''
?
    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        methods: {
            fullName() {
                let a = '';
                let b = '';
                if (this.firstName.length != 0)
                    a = this.firstName.replace(this.firstName[0], this.firstName[0].toUpperCase())
                if (this.lastName.length != 0)
                    b = this.lastName.replace(this.lastName[0], this.lastName[0].toUpperCase())
                return a + ' ' + b
            }
        }
    })
?
</script>

我們可以看到通過方法就能很好的解決代碼過于冗長(zhǎng)的問題。但是又面臨了另一個(gè)問題，我們?cè)趯W(xué)習(xí)vue中的data屬性時(shí)了解到，只要data中的數(shù)據(jù)發(fā)生變化，頁面中用到data數(shù)據(jù)的地方就會(huì)進(jìn)行更新，所以當(dāng)data數(shù)據(jù)firstName與lastName一改變就會(huì)重新調(diào)用方法fullName,在一定情況下會(huì)導(dǎo)致代碼效率低，另外，methods中的方法在插值表達(dá)式中使用了多少次就會(huì)運(yùn)行多少次。根據(jù)以上兩種方法的弊端出現(xiàn)了另一種方法，就是使用computed屬性。

computed

在computed中可以定義一些屬性：計(jì)算屬性。計(jì)算屬性的本質(zhì)其實(shí)就是一個(gè)方法，只不過在使用的時(shí)候可以直接當(dāng)做屬性來使用。具體有以下特點(diǎn)

計(jì)算屬性在使用時(shí)不需要加(),直接寫名稱即可
如果計(jì)算屬性用到了data中的數(shù)據(jù)，當(dāng)data數(shù)據(jù)發(fā)生變化時(shí)，就會(huì)立即重新計(jì)算這個(gè)計(jì)算屬性的值
計(jì)算屬性在第一次使用時(shí)的結(jié)果會(huì)被緩存起來，直到屬性中所依賴的data數(shù)據(jù)發(fā)生改變計(jì)算屬性的結(jié)果才會(huì)重新求值

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{fullName}}</span></br>
        </br>
        fullName： <span>{{fullName}}</span></br>
        </br>
        fullName： <span>{{fullName}}</span>
?
    </div>
</body>
<script type="text/javascript">
    var str = ''
?
    new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        computed: {
            //get的作用？當(dāng)讀取fullName時(shí)，get就會(huì)被調(diào)用，且返回值就是fullName的值
            //get什么時(shí)候被調(diào)用？1.當(dāng)?shù)谝淮巫x取fullName時(shí)。2.當(dāng)所依賴的data數(shù)據(jù)發(fā)生變化時(shí)
            fullName: {
                get() {
                    console.log('hi,我調(diào)用了computed')
                  let a = '';
                let b = '';
                if (this.firstName.length != 0)
                    a = this.firstName.replace(this.firstName[0], this.firstName[0].toUpperCase())
                if (this.lastName.length != 0)
                    b = this.lastName.replace(this.lastName[0], this.lastName[0].toUpperCase())
                return a + ' ' + b
                }
            }
        }
    })
</script>
</html>

在前面我們說過methods中的方法在頁面中使用n次便會(huì)調(diào)用n次，而computed中的屬性卻不會(huì)出現(xiàn)上面的情況。上面代碼中我們?cè)陧撁嬷惺褂昧送挥?jì)算屬性3次卻只輸出了1次結(jié)果，同樣使用methods中的full方法卻輸出了3次結(jié)果，意味著方法調(diào)用了3次。為什么會(huì)有這樣的結(jié)果？這都是因?yàn)閏omputed中有緩存機(jī)制而methods中并沒有。在代碼解析到第一個(gè)fullName時(shí)就會(huì)對(duì)fullName的結(jié)果進(jìn)行緩存，而到第二個(gè)、第三個(gè)時(shí)會(huì)發(fā)現(xiàn)緩存中已經(jīng)有了，那么就不會(huì)在對(duì)其進(jìn)行調(diào)用。

對(duì)computed的使用有了大致的了解后，我們?cè)賮韺?duì)computed補(bǔ)充一下。

在computed我們可以通過給計(jì)算屬性添加set方法達(dá)到賦值效果

<body>
    <div id="app">
        firstName: <input type="text" v-model=firstName> </br>
        </br>
        lastName: <input type="text" v-model=lastName></br>
        </br>
        fullName： <span>{{fullName}}</span></br>
        </br>
    </div>
</body>
<script type="text/javascript">
    var str = ''
?
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'joe',
            lastName: 'lili'
        },
        computed: {
            //get的作用？當(dāng)讀取fullName時(shí)，get就會(huì)被調(diào)用，且返回值就是fullName的值
            //get什么時(shí)候被調(diào)用？1.當(dāng)?shù)谝淮巫x取fullName時(shí)。2.當(dāng)所依賴的data數(shù)據(jù)發(fā)生變化時(shí)
            fullName: {
                get() {
                    console.log(this)
                    return this.firstName + this.lastName
                },
                set(val) {
                    this.firstName = val[0]
                    this.lastName = val[1]
                }
            }
        }
    })
?
</script>

我們可以看到當(dāng)在控制臺(tái)對(duì)fullName賦值時(shí)firstName以及l(fā)astName都會(huì)改變

如果計(jì)算屬性中只有g(shù)et沒有set的話可以直接像下面代碼這樣寫

computed: {
            fullName(){
                console.log(this)
                return this.firstName + this.lastName
                }
            }