Vue計算屬性

前言?

我們要做的是springboot和vue.js所做的前后端分離的hr項目，所以從來沒接觸到vue的小伙伴，可以這篇文章

學Vue入門，這一篇就夠了

模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

<div?id="example">

在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。

所以，對于任何復雜邏輯，你都應當使用計算屬性。

基礎例子

<div?id="app">var?app?=?

結果：gnaggniqil ollehmessage

這里我們聲明了一個計算屬性 reverseMessage。我們提供的函數將用作屬性 app.reversedMessage 的 getter 函數：

你可以打開瀏覽器的控制臺，自行修改例子中的 app。app.reversedMessage 的值始終取決于 app.message 的值。

你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue 知道 app.reversedMessage 依賴于 app.message，因此當 app.message 發生改變時，所有依賴 app.reversedMessage 的綁定也會更新。而且最妙的是我們已經以聲明的方式創建了這種依賴關系：計算屬性的 getter 函數是沒有副作用 (side effect) 的，這使它更易于測試和理解。

計算屬性緩存 vs 方法

你可能已經注意到我們可以通過在表達式中調用方法來達到同樣的效果：

<div>{{reverseMessage()}}

在組件中

methods:{
????reverseMessage(){
????????return?this.message.split('').reverse().join('');
????}
}

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

詳細代碼如下：

html>

? ? ? ? ? ? ? ? ? ? ? ?覺得文章對自己有用，想要繼續學下去的可以

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 長按下方二維碼

img

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 關注【javalingfeng】哦

? ? ? ? ? ? ? ? ? ? ? 堅持原創技術分享，您的支持將鼓勵我繼續創作！

總結

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

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