Vue中的computed屬性詳解

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

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

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

插值表達式

我們先用插值表達式的方法來實現這一效果

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

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

從插值表達式所展現的情況來看雖然能實現想要的效果但是代碼顯得特別冗長不利于閱讀，這個時候想到可以向methods中添加方法來實現這一效果。

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中的數據發(fā)生變化，頁面中用到data數據的地方就會進行更新，所以當data數據firstName與lastName一改變就會重新調用方法fullName,在一定情況下會導致代碼效率低，另外，methods中的方法在插值表達式中使用了多少次就會運行多少次。根據以上兩種方法的弊端出現了另一種方法，就是使用computed屬性。

computed

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

計算屬性在使用時不需要加(),直接寫名稱即可
如果計算屬性用到了data中的數據，當data數據發(fā)生變化時，就會立即重新計算這個計算屬性的值
計算屬性在第一次使用時的結果會被緩存起來，直到屬性中所依賴的data數據發(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就會被調用，且返回值就是fullName的值
            //get什么時候被調用？1.當第一次讀取fullName時。2.當所依賴的data數據發(fā)生變化時
            fullName: {
                get() {
                    console.log('hi,我調用了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次便會調用n次，而computed中的屬性卻不會出現上面的情況。上面代碼中我們在頁面中使用了同一計算屬性3次卻只輸出了1次結果，同樣使用methods中的full方法卻輸出了3次結果，意味著方法調用了3次。為什么會有這樣的結果？這都是因為computed中有緩存機制而methods中并沒有。在代碼解析到第一個fullName時就會對fullName的結果進行緩存，而到第二個、第三個時會發(fā)現緩存中已經有了，那么就不會在對其進行調用。

對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就會被調用，且返回值就是fullName的值
            //get什么時候被調用？1.當第一次讀取fullName時。2.當所依賴的data數據發(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
                }
            }