Vue中的computed屬性詳解

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

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

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

插值表達式

我們先用插值表達式的方法來實現(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)能簡單實現(xiàn)我們所需要的效果，但是如果現(xiàn)在我想要添加另外的要求，當我輸入的是英文的時候就將首字母大寫，這個時候我們只能使用以下方法

<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>

從插值表達式所展現(xiàn)的情況來看雖然能實現(xiàn)想要的效果但是代碼顯得特別冗長不利于閱讀，這個時候想到可以向methods中添加方法來實現(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>

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

computed

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

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

<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的作用？當讀取fullName時，get就會被調(diào)用，且返回值就是fullName的值
            //get什么時候被調(diào)用？1.當?shù)谝淮巫x取fullName時。2.當所依賴的data數(shù)據(jù)發(fā)生變化時
            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次便會調(diào)用n次，而computed中的屬性卻不會出現(xiàn)上面的情況。上面代碼中我們在頁面中使用了同一計算屬性3次卻只輸出了1次結果，同樣使用methods中的full方法卻輸出了3次結果，意味著方法調(diào)用了3次。為什么會有這樣的結果？這都是因為computed中有緩存機制而methods中并沒有。在代碼解析到第一個fullName時就會對fullName的結果進行緩存，而到第二個、第三個時會發(fā)現(xiàn)緩存中已經(jīng)有了，那么就不會在對其進行調(diào)用。

對computed的使用有了大致的了解后，我們再來對computed補充一下。

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

<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的作用？當讀取fullName時，get就會被調(diào)用，且返回值就是fullName的值
            //get什么時候被調(diào)用？1.當?shù)谝淮巫x取fullName時。2.當所依賴的data數(shù)據(jù)發(fā)生變化時
            fullName: {
                get() {
                    console.log(this)
                    return this.firstName + this.lastName
                },
                set(val) {
                    this.firstName = val[0]
                    this.lastName = val[1]
                }
            }
        }
    })
?
</script>

我們可以看到當在控制臺對fullName賦值時firstName以及l(fā)astName都會改變

如果計算屬性中只有get沒有set的話可以直接像下面代碼這樣寫

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