溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue中計算屬性如何使用，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
一、計算屬性
1.1 概述
計算屬性歸根結底也是屬性，它也是跟表現層是時刻同步的，雖然我們可以在插值中對數據進行各種處理，但是插值中的表達式處理畢竟只能用于簡單的運算，不能擁有太多的業務邏輯。
<body>
<div id="app">
<h2>{{name.toUpperCase()}}</h2>
<!-- <h2>BLUE</h2> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
name: 'blue'
}
})
</script>上面代碼是我們熟悉的在插值中使用表達式，但是這里面我們不能寫入業務代碼。
1.2 計算屬性語法
在構造函數的參數對象中有一個【computed】屬性，該屬性就是用于定義計算屬性的，該對象中的【鍵】也就是我們的計算屬性，與【data】不同的是，計算屬性的鍵值是一個【擁有返回值的函數】，該函數中可以訪問到【data】中的所有屬性。
<body>
<div id="app">
<h2>{{rs}}</h2>
<!-- <h2>BLUE LOVE PINK</h2> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
hs: 'BLUE',
wf: "PINK"
},
computed: {
rs:function(){
return `${this.hs} LOVE ${this.wf}`
}
}
})
</script>上面代碼屬性【rs】是定義的一個計算屬性,該屬性值是通過【data】中的兩個屬性值計算得到，返回一個拼接的字符串（這兒使用了ES6的【模板字符串】）并且當【data】中的相關值變化之后，【rs】屬性都會進行重新計算。
可能剛開始對計算屬性會有些疑惑，比如上面的例子我把代碼寫成下面這樣子也是可以的
<body>
<div id="app">
<h2>{{hs}} LOVE {{wf}}</h2>
<!-- <h2>BLUE LOVE PINK</h2> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
hs: 'BLUE',
wf: "PINK"
}
})
</script>上面的代碼運行效果和我們使用計算屬性的效果是一樣的，但是這樣的寫法只適用于簡單的處理，【計算屬性可以處理更復雜的業務邏輯】，比如我們根據【data】中的一個屬性值進行數據請求用于構建一個屬性，我們就必須使用計算屬性了。
【注意！！】計算屬性雖然是一個方法，但是在Vue內部會被翻譯成一個屬性，我們可以使用實例【vm.rs】訪問到數據的。
1.3 計算屬性和過濾器的比較
如果用于對【data】中【單個】屬性的【簡單】處理，推薦使用過濾器，但是如果一個值使用了【data】中至少2個值或者對一個值進行復雜處理，那么就推薦使用計算屬性了。
<body>
<div id="app">
<h2>{{hs | lover}}</h2>
<!-- <h2>BLUE LOVE PINK</h2> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
hs: 'BLUE',
},
filters: {
lover(value){
return `${value} LOVE PINK`
}
}
})
</script>上面代碼就使用了一個【data】屬性值做簡單的處理，所以使用過濾器，而且也發現了過濾字符串“LOVE PINK”是不可變的。
1.4 計算屬性和Methods的比較
計算屬性就是為了定屬性的時候處理復雜的業務邏輯，而且在插值中我們可以使用表達式，那么我們是否可以通過使用在插值中調用一個有返回值的函數呢？它和計算屬性又有什么區別呢？
<body>
<div id="app">
<h2>{{rs}}</h2>
<!-- <h2>EULB</h2> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
name: 'BLUE',
},
computed: {
rs: function () {
return [...this.name].reverse().join('');
}
}
})
</script>上面代碼將數據進行反向處理（使用了【ES6數組字符串擴展】 ），當我們改變name的值的時候，計算屬性【rs】會跟著改變。下面我們將它改成一個方法結合插值表達式進行處理，看看區別。
<body>
<div id="app">
<h2>{{ rs() }}</h2>
<!-- <h2>EULB</h2> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
name: 'BLUE',
},
methods: {
rs() {
return [...this.name].reverse().join('');
}
}
})
</script>上面代碼將計算屬性改成了一個方法結合插值表達式，發現效果和計算屬性沒差別，改變name的值的時候頁面也刷新了。那是不是這兩者就真的沒區別呢，答案當然是否定的，如果沒有區別干嘛還有計算屬性的存在。
【計算屬性是基于依賴進行緩存的】，只有計算屬性的依賴發生改變時才會重新求值，也就是說如果依賴沒有發生改變，那么計算屬性會立刻返回之前的計算結果，假如我們有一個性能開銷比較大的的計算屬性 A ，它需要遍歷一個極大的數組和做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用 method 替代。
1.5 計算屬性和Watch的比較
我們發現計算屬性會監聽依賴，如果依賴發生變化則會從新計算屬性，那么【監聽器】也有這么一個功能，那么我們應該在什么時候使用【計算屬性】，什么時候使用【監聽器】呢？
<body>
<div id="app">
<h2>{{fullName}}</h2>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
firstName: 'Jack',
lastName: 'Blue',
fullName: 'Jack Blue'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
</script>上面代碼中我們監聽firstName和lastName用于構建fullName，效果很好，當firstName和lastName任意一個值改變的時候fullName都會隨之改變。下面我們看一下計算屬性的寫法
<body>
<div id="app">
<h2>{{fullName}}</h2>
<!-- <h2>Jack Blue</h2> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
firstName: 'Jack',
lastName: 'Blue',
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>上面代碼使用計算屬性的方式進行了改造，fullName 依賴 firstName和 lastName 兩個屬性，當這兩個屬性任意一個發生變化，fullname都會重新進行計算。但是計算屬性是不是簡潔了很多呢！
【總結！！】當一個屬性需要依賴多個【data】中的屬性時，建議使用計算屬性，如果我們不是對屬性進行操作，只是單純的依據【data】中的某個值變化后做一些【非屬性操作】時或者是在數據變化響應時，【執行異步操作或開銷較大的操作】（比如：將變化后的值存入數據庫，而不是改變其他屬性）就使用Watch。
1.6 計算屬性的setter
上面我們是使用的計算屬性都是用于對計算屬性的取值，計算屬性默認頁只給了【getter】，但是在需要的時候我們可以人為的添加【setter】
<body>
<div id="app">
<h2>{{fullName}}</h2>
<!-- <h2>Jack Blue</h2> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
firstName: 'Jack',
lastName: 'Blue',
},
computed: {
fullName: {
//getter
get() {
return this.firstName + ' ' + this.lastName
},
//setter
set(newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
</script>看完上述內容，你們掌握Vue中計算屬性如何使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
