computed屬性不僅可以直接獲取對象的屬性,并且它可以基于其他數據產生衍生數據并在其內部處理一些邏輯。與json對象的屬性相似,我們也可以為其定義getter和setter方法并在其中添加任何邏輯。Vue的computed屬性通常用于基于某個狀態來生成衍生數據,而不是響應式地監聽某個狀態。
var vm = new Vue({ data: { firstName: 'Tom', lastName: 'Jerry' }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } } })
在上面的代碼中,我們定義了一個computed的屬性fullName。這個屬性是在data中的firstName和lastName基礎上計算而來的。任何由fullName計算出的屬性都是響應式的,任何對其修改的操作都會觸發UI的更新。
但是在開發中,computed屬性有時需要一些參數來進行計算。在Vue中,輸出一個帶有參數的computed屬性和一個不帶參數的屬性是類似的。在我們的計算屬性中,我們可以以函數的形式提供參數并在其中完成一些邏輯。例如,我們想要在Vue組件中使用帶有參數的computed屬性fullName,如下所示:
var vm = new Vue({ data: { firstName: 'Tom', lastName: 'Jerry' }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName; }, greetings: function() { return function(name) { return 'Hello ' + name + ', Welcome!'; } } } })
在上面的代碼中,我們定義了另一個computed屬性greetings,它帶有一個參數name。在該computed屬性中,我們將返回匿名函數,它將接受一個名稱作為參數并返回一個字符串。在這種情況下,我們可以通過計算屬性returnValue來獲取具有參數的計算屬性(通過調用function并傳遞所需的參數)。
{{greetings('Vue')}}
在上面的代碼中,我們將在Vue模板中調用greetings屬性并傳遞字符串'Vue'作為參數。當計算屬性計算完成時,我們將在視圖中看到字符串'Hello Vue, Welcome!'。
總的來說,Vue的computed屬性提供了一個方便的方法來基于其他狀態來計算衍生數據。當computed屬性接收到參數時,我們可以借助computed屬性來完成一些更進一步的邏輯。