Vue中的computed屬性詳解
目錄
- 插值表示式
- methods
- computed
- 總結
今天來說說中的計算屬性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/">
new Vue({
el: "#app",data: {
firstName: '張',lastName: '三'
},www.cppcns.com
我們可以發現能簡單實現我們所需要的效果，但是如果現在我想要新增另外的要求，當我輸入的是英文的時候就將首字母大寫，這個時候我們只能使用以下方法
<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/script">
var str = ''
new Vue({VpPtmJ
從插值表示式所展現的情況來看雖然能實現想要的效果但是程式碼顯得特別冗長不利於閱讀，這個時候想到可以向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",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中的資料發生變化，頁面中用到data資料的地方就會進行更新，所以當data資料firstName與lastName一改變就會重新呼叫方法fullName,在一定情況下會導致程式碼效率低，另外，methods中的方法在插值表示式中使用了多少次就會執行多少次。根據以上兩種方法的弊端出現了另一種方法，就是使用computed屬性。
computed
在computed中可以定義一些屬性：計算屬性。計算屬性的本質其實就是一個方法，只不過在使用的時候可以直接當做屬性來使用。具體有以下特點
- 計算屬性在使用時不需要加(),直接寫名稱即可
- 如果計算屬性用到了data中的資料，當data資料發生變化時，就會立即重新計算這個計算屬性的值
- 計算屬性在第一次使用時的結果會被快取起來，直到屬性中所依賴的data資料發生改變計算屬性的結果才會重新求值
<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",computed: {
//get的作用？當讀取fullName時，get就會被呼叫，且返回值就是fullName的值
//get什麼時候被呼叫？1.當第一次讀取fullName時。2.當所依賴的data資料發生變化http://www.cppcns.com時
fullName: {
get() {
console.log('hi,我呼叫了computed')
let a = '';
let b = '';
if (this.firstName.length != 0)
a = this.firstName.replace(this.firstName[0],this.lastName[0].toUpperCase())
return a + ' ' + b
}
}
}
})
</script>
</html>
在前面我們說過methods中的方法在頁面中使用n次便會呼叫n次，而computed中的屬性卻不會出現上面的情況。上面程式碼中我們在頁面中使用了同一計算屬性3次卻只輸出了1次結果，同樣使用methods中的full方法卻輸出了3次結果，意味著方法呼叫了3次。為什麼會有這樣的結果？這都是因為computed中有快取機制而methods中並沒有。在程式碼解析到第一個fullName時就會對fullName的結果進行快取，而到第二個、第三個時會發現快取中已經有了，那麼就不會在對其進行呼叫。
對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",computed: {
//get的作用？當讀取fullName時，get就會被呼叫，且返回值就是fullName的值
//get什麼時候被呼叫？1.當第一次讀取fullName時。2.當所依賴的data資料發生變化時
fullName: {
get() {
console.log(this)
return this.firstName + this.lastName
},set(val) {
this.firstName = val[0]
this.lastName = val[1]
}
}
}
})
</script>
我們可以看到當在控制檯對fullName賦值時firstName以及lastName都會改變
如果計算屬性中只有get沒有set的話可以直接像下面程式碼這樣寫
computed: {
fullName(){
console.log(this)
return this.firstName + this.lastName
}
}
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!