Vue中使用計算屬性的知識點總結
計算屬性
有些時候,我們在模板中放入了過多的邏輯,從而導致模板過重,且難以維護。例如:
<div id="app"&gwww.cppcns.comt;
{{ message.split('').reverse().join('') }}
</div>
碰到這樣的情況,我們必須看一段時間才能意識到,這裡是想要顯示變數message的翻轉字串,而且,一旦我們想要在模板中多次使用翻轉字串時,會更加麻煩。 所以,當我們處理複雜邏輯時,都應該使用計算屬性。
基礎用法
計算屬性是配置物件中的屬性,使用方式如下:
<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.splithttp://www.cppcns.com('').reverse().join(''); } } })
我們可以看到,reversedMsg的值取決於msg的值,所以,當我們更改msg的值是,reversedMsg的值也會隨之更改。
計算屬性 vs 方法
其實,我們上述的功能,利用方法也可以實現,如:
<div id="app"> <p>原始字串: "{{ msg }}"</p> <p>翻轉字串: "{{ reversedMsg() }}"</p> </div> const vm = new Vue({ el: '#app',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',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',computed: { reversedMsg: { getter () { return this.msg.split('').reverse().join(''); } } } })
setter 設定
可選,set函式在給計算屬性重新賦值時會執行。 引數:為被重新設定的值。 setter的this,被自動繫結為Vue例項。
const vm = new Vue({ el: '#app',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: '',des: '我是誰',sex: 'f',id: aQBvjXs'157894' },des: '我長得很好看',id: '2849245' },src: '.jpeg',des: '你沒有見過陌生的臉',id: '348515' },{ nhttp://www.cppcns.comame: '',des: '瓜皮劉',id: '478454' } ]
練習_全選商品
courseList: [ { poster: '.jpg',title: '',price: 1299,cart: 1,id: 0 },{ poster: '.jpg',price: 1148,id: 1595402664708 },price: 1,id: 1596305473062 },id: 1595413512182 },price: 12798,id: 1596302161181 },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中怎麼使用計算屬性的資料請關注我們其它相關文章!