目錄

1.計算屬性

2.計算方法

3.深入理解計算屬性

---

當需要使用大量邏輯時，若直接放在模板中會使得模板過重且難以維護，如下例

<div id="app">{{ message.split('').reverse().join('')}} </div> var vm = new Vue({el: '#app',data: {message: "It's a joke!"} });

【結(jié)果】這里是想要顯示變量message的反轉(zhuǎn)字符串，而且，一旦我們想要在模板中多次使用翻轉(zhuǎn)字符串時，會更加麻煩，所以，當我們處理復雜邏輯時，應該使用計算屬性

1.計算屬性

計算屬性是Vue配置對象中的屬性，使用方式如下：

<div id="app"><!-- 計算屬性的值可以像data數(shù)據(jù)一樣，直接使用 -->{{ reverseMsg }} </div> var vm = new Vue({el: '#app',data: {message: "It's a joke!"},computed:{reverseMsg: function () {//返回的值就是計算屬性的值return this.message.split('').reverse().join('');}} });

?可以看到，reverseMsg 的值取決于message的值，所以當message更改時，reverseMsg 的值也會隨之更改

2.計算方法

計算屬性的功能也可以用方法實現(xiàn)，如下例

<div id="app">{{ reverseMsg() }} </div> var vm = new Vue({el: '#app',data: {msg: "It's a joke!"},methods: {reverseMsg: function(){return this.msg.split('').reverse().join('');}} });

【注】雖然在表達式中調(diào)用方法和計算屬性效果相同，但是二者有本質(zhì)的區(qū)別：計算屬性是基于響應式依賴進行緩存的，計算屬性的值一直存于緩存中，只要它依賴的data數(shù)據(jù)不改變，每次訪問計算屬性，都會立即返回緩存結(jié)果，而不是再次執(zhí)行函數(shù)。而方法則是每次觸發(fā)重新渲染，調(diào)用方法總會再次執(zhí)行函數(shù)。

當使用方法時，每一次頁面重新渲染，對應的方法就會重新執(zhí)行一次，如：

<div id="app"><p>{{ say }}</p><p>{{ reverseMsgM() }}</p><p>{{ reverseMsgC }}</p> </div> var vm = new Vue({el: '#app',data: {msg: "It's a joke!",say: "What a wonderful day!"},computed: {reverseMsgC() {console.log("執(zhí)行計算屬性")return this.msg.split('').reverse().join('');}},methods: {reverseMsgM: function(){console.log("執(zhí)行方法")return this.msg.split('').reverse().join('');}} }); vm.say = 'Life is a shit!'

【結(jié)果】由下圖可以得知，reverseMsgM 比 reverseMsgC 多執(zhí)行一次，因為當改變 say 的值時，頁面會重新渲染，方法就會重新執(zhí)行，而計算屬性并沒有這種現(xiàn)象。在實際使用時，當改動的數(shù)據(jù)與這個函數(shù)沒有關系時，我們是不想讓它重新執(zhí)行的，如果函數(shù)內(nèi)的邏輯很復雜，對性能也是一種消耗。

【問題】?為什么要進行緩存？

假設有一個計算屬性A，它需要遍歷一個巨大的數(shù)組并且做巨大的計算。然后我們需要使用到這個計算屬性A，如果沒有緩存，我們就會再次執(zhí)行A的函數(shù)，這樣性能開銷就變得很大了。?

3.深入理解計算屬性

計算屬性除了寫成一個函數(shù)外，還可以寫成一個對象，對象內(nèi)部有兩個屬性，get和set，這兩個屬性均為函數(shù)，二者的 this 均自動綁定Vue實例，寫法如下：

const vm = new Vue({el: '#app',computed: {fullName: {get() {//代碼},set() {//代碼}}} })

當我們?nèi)?strong>獲得某一個計算屬性時，就會執(zhí)行get函數(shù)，如下例：

<div id="app">{{ fullName }} </div> const vm = new Vue({el: '#app',data: {firstName: 'Tony',lastName: 'Stark'},computed: {fullName: {get() {console.log('執(zhí)行get函數(shù)');return this.firstName + ' ' + this.lastName ;}}} })

?【結(jié)果】

?set 函數(shù)是可選項，在給計算屬性重新賦值時會執(zhí)行，所傳參數(shù)為重新設定的值

const vm = new Vue({el: '#app',data: {firstName: 'Tony',lastName: 'Stark'},computed: {fullName: {get() {console.log('執(zhí)行get函數(shù)');return this.firstName + ' ' + this.lastName ;},set(name) {console.log('執(zhí)行set函數(shù)');}}} }) vm.fullName = 'Morgan';

【結(jié)果】?

【注】由上面結(jié)果可以知道，即使給計算屬性賦了值，計算屬性也不會改變，只有當依賴的響應式屬性變化了，計算屬性才會重新計算，如下例

const vm = new Vue({el: '#app',data: {firstName: 'Tony',lastName: 'Stark'},computed: {fullName: {get() {console.log('執(zhí)行get函數(shù)');return this.firstName + ' ' + this.lastName ;},set(name) {console.log('執(zhí)行set函數(shù)');this.firstName = name;}}} }) vm.fullName = 'Morgan';

【結(jié)果】

總結(jié)

以上是生活随笔為你收集整理的vue属性_computed(计算属性)methods(方法)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。