目錄

1.計算屬性

2.計算方法

3.深入理解計算屬性

---

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

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

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

1.計算屬性

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

<div id="app"><!-- 計算屬性的值可以像data數據一樣，直接使用 -->{{ 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.計算方法

計算屬性的功能也可以用方法實現，如下例

<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('');}} });

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

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

<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("執行計算屬性")return this.msg.split('').reverse().join('');}},methods: {reverseMsgM: function(){console.log("執行方法")return this.msg.split('').reverse().join('');}} }); vm.say = 'Life is a shit!'

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

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

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

3.深入理解計算屬性

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

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

當我們去獲得某一個計算屬性時，就會執行get函數，如下例：

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

?【結果】

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

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

【結果】?

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

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

【結果】

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。