你知道,什麼時候用Vue計算屬性嗎?
摘要:當我們處理複雜邏輯時,都應該使用計算屬性。
本文分享自華為雲社群《深入理解計算屬性,知道什麼時候該用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,
},
]
- 帶你掌握 C 中三種類成員初始化方式
- 實踐GoF的設計模式:工廠方法模式
- DCM:一個能夠改善所有應用資料互動場景的中介軟體新秀
- 手繪圖解java類載入原理
- 關於加密通道規範,你真正用的是TLS,而非SSL
- 程式碼重構,真的只有複雜化一條路嗎?
- 解讀分散式排程平臺Airflow在華為雲MRS中的實踐
- 透過例項demo帶你認識gRPC
- 帶你聚焦GaussDB(DWS)儲存時遊標使用
- 傳統到敏捷的轉型中,誰更適合做Scrum Master?
- 輕鬆解決研發知識管理難題
- Java中觀察者模式與委託,還在傻傻分不清
- 如何使用Python實現影象融合及加法運算?
- 什麼是強化學習?
- 探索開源工作流引擎Azkaban在MRS中的實踐
- GaussDB(DWS) NOT IN優化技術解密:排他分析場景400倍效能提升
- Java中觀察者模式與委託,還在傻傻分不清
- Java中的執行緒到底有哪些安全策略
- 一圖詳解java-class類檔案原理
- Java中的執行緒到底有哪些安全策略