Vue中使用計算屬性的知識點總結
計算屬性
有些時候，我們在模板中放入瞭過多的邏輯，從而導致模板過重，且難以維護。例如：
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
碰到這樣的情況，我們必須看一段時間才能意識到，這裡是想要顯示變量message的翻轉字符串，而且，一旦我們想要在模板中多次使用翻轉字符串時，會更加麻煩。 所以，當我們處理復雜邏輯時，都應該使用計算屬性。
基礎用法
計算屬性是Vue配置對象中的屬性，使用方式如下：
<div id="app">
<!-- 計算屬性的值可以像data數據一樣，直接被使用 -->
{{ someComputed }}
</div>
const vm = new Vue({
el: '#app',
computed: {
// 返回的值，就是計算屬性的值
someComputed () {
return 'some values'
}
}
})
例如，我們想要獲取到一串字符串的翻轉字符串，我們可以利用計算屬性來做：
<div id="app">
<p>原始字符串: "{{ msg }}"</p>
<p>翻轉字符處啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
computed: {
reversedMsg: function () {
return this.msg.split('').reverse().join('');
}
}
})
我們可以看到，reversedMsg的值取決於msg的值，所以，當我們更改msg的值是，reversedMsg的值也會隨之更改。
計算屬性 vs 方法
其實，我們上述的功能，利用方法也可以實現，如：
<div id="app">
<p>原始字符串: "{{ msg }}"</p>
<p>翻轉字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
methods: {
reversedMsg: function () {
return this.msg.split('').reverse().join('');
}
}
})
雖然在表達式中調用方法也可以實現同樣的效果，但是使用計算屬性和使用方法有著本質的區別。 當使用方法時，每一次頁面重新渲染，對應的方法都會重新執行一次，如：
<div id="app">
<p>{{ name }}</p>
<p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello',
name: 'shanshan'
},
methods: {
reversedMsg: function () {
console.log('方法執行啦');
return this.msg.split('').reverse().join('');
}
}
})
vm.name = 'duyi';
在上面的例子中我們可以看到，一旦更改name的值，頁面會重新渲染，此刻控制臺中打印出方法執行啦這串字符串，代表著reversedMsg這個函數執行瞭，但是我們並不需要該方法執行，因為改動的數據和這個函數沒有任何關系，如果這個函數內的邏輯很復雜，那麼對於性能來講，也是一種消耗。
但是利用計算屬性做，就不會有這樣的現象出現，如：
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello',
name: 'shanshan'
},
computed: {
reversedMsg: function () {
console.log('計算執行啦');
return this.msg.split('').reverse().join('');
}
}
})
vm.name = 'duyi';
此時可以看到，當給數據name重新賦值時，計算屬性並沒有執行。 所以，計算屬性和方法的最本質的區別，是：計算屬性是基於響應式依賴進行緩存的，計算屬性的值一直存於緩存中，隻要它依賴的data數據不改變，每次訪問計算屬性，都會立刻返回緩存的結果，而不是再次執行函數。而方法則是每次觸發重新渲染，調用方法將總會再次執行函數。
那麼，為什麼需要緩存呢？
假如說，我們有一個計算屬性A，它需要遍歷一個巨大的數組並且做巨大的計算。然後我們需要使用到這個計算屬性A，如果沒有緩存，我們就會再次執行A的函數，這樣性能開銷就變得很大瞭。
深入計算屬性
計算屬性除瞭寫成一個函數之外，還可以寫成一個對象，對象內有兩個屬性，getter&setter，這兩個屬性皆為函數，寫法如下：
const vm = new Vue({
el: '#app',
computed: {
fullName: {
getter () {
// 一些代碼
},
setter () {
// 一些代碼
}
}
}
})
getter 讀取
在前面，我們直接將計算屬性寫成瞭一個函數，這個函數即為getter函數。也就是說，計算屬性默認隻有getter。 getter的this，被自動綁定為Vue實例。
何時執行？
當我們去獲取某一個計算屬性時，就會執行get函數。
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
computed: {
reversedMsg: {
getter () {
return this.msg.split('').reverse().join('');
}
}
}
})
setter 設置
可選，set函數在給計算屬性重新賦值時會執行。 參數：為被重新設置的值。 setter的this，被自動綁定為Vue實例。
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello',
firstStr: ''
},
computed: {
reversedMsg: {
getter () {
return this.msg.split('').reverse().join('');
},
setter (newVal) {
this.firstStr = newVal[0];
}
}
}
})
要註意，即使給計算屬性賦瞭值，計算屬性也不會改變，在重復一遍，隻有當依賴的響應式屬性變化瞭，計算屬性才會重新計算。
練習_姓名篩選
personArr: [
{
name: '',
src: '.jpg',
des: '頸椎不好',
sex: 'm',
id: '056482'
},
{
name: '',
src: '.jpg',
des: '我是誰',
sex: 'f',
id: '157894'
},
{
name: '',
src: '.jpg', des: '我長得很好看',
sex: 'f',
id: '2849245'
},
{
name: '',
src: '.jpeg',
des: '你沒有見過陌生的臉',
sex: 'm',
id: '348515'
},
{
name: '',
src: '.jpeg',
des: '瓜皮劉',
sex: 'm',
id: '478454'
}
]
練習_全選商品
courseList: [
{
poster: '.jpg',
title: '',
price: 1299,
cart: 1,
id: 0
},
{
poster: '.jpg',
title: '',
price: 1148,
cart: 1,
id: 1595402664708
},
{
poster: '.jpg',
title: '',
price: 1,
cart: 1,
id: 1596305473062
},
{
poster: '.jpg',
title: '',
price: 1,
cart: 1,
id: 1595413512182
},
{
poster: '.jpg',
title: '',
price: 12798,
cart: 1,
id: 1596302161181
},
{
poster: '.jpg',
title: '',
price: 1,
cart: 1,
id: 1596300025301,
},
]
知識點擴展：
實例擴展
<div id="app1"></div>
<div id="app2">
{
<!-- -->{reverseMes}}
</div>
let vm1 = new Vue({
el:'#app1',
data:{
mes:'hello'
}
})
let vm2 = new Vue({
el:'#app2',
computed: {
reverseMes(){
// 使用實例 vm1中的data數據中心的 mes 去做反轉字符串的操作
return vm1.mes.split('').reverse().join('')
}
}
})
實例vm1中的數據，vm2計算屬性也可以使用
自定義的計算屬性除瞭可以在插值表達式中使用，還可以在 v-bind: 屬性綁定中使用，用來做一些樣式的變換等等。
以上就是Vue中使用計算屬性的知識點總結的詳細內容，更多關於Vue中怎麼使用計算屬性的資料請關註WalkonNet其它相關文章！