什么時候用計算屬性？

官方解釋：當模板中放入太多的邏輯，模板過重且難以維護時，你都應當使用計算屬性

通俗表達：當你要渲染到頁面的數據需要通過大量的計算才可以得到，這時候就應該使用計算屬性

代碼案例：

##html

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

##jsvar vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } }})輸出Original message: "Hello"Computed reversed message: "olleH"

計算屬性vs過濾器

個人理解：過濾器和計算屬性都可以把現有的數據變成你想要展示的數據，他們兩個的不同點就在于對數據處理的復雜程度

計算屬性vs自定義方法

有些對數據的處理邏輯，我們用自己些的方法也可以處理，那我們為什么要用計算屬性呢?

Reversed message: "{{ reversedMessage() }}"

// 在組件中methods: { reversedMessage: function () { return this.message.split('').reverse().join('') }}

官網解釋：我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。只在相關依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

也就是說有些數據用計算屬性處理更加的友好，效更高！

關注我，每天收獲一點點。

總結

以上是生活随笔為你收集整理的vue修改计算属性的值_vue之计算属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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