Vue 的計算屬性是一種自動計算返回值的方法,結果會被緩存,只有在響應式依賴發生變化時才會重新計算。computed 可以像普通屬性一樣在模板中綁定使用,但不同的是它會根據依賴自動更新值,讓我們不用手動去監聽數據的變化。
{
data: {
a: 1,
b: 2,
},
computed: {
c: function() {
return this.a + this.b;
}
}
}
在上面的代碼中,我們定義了一個 data 對象,里面包含了屬性 a 和 b,還定義了一個計算屬性 c,它的值是 a 和 b 的和。當 a 或 b 的值發生變化時,c 的值會根據新的 a 和 b 的值自動更新。
除了簡單的計算,computed 的功能還遠不止這些,它也可以與 methods 方法和 watch 方法一起使用來實現更復雜的功能。例如:
{
data: {
firstName: 'John',
lastName: 'Doe',
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
},
methods: {
greet: function() {
alert('Hello ' + this.fullName);
}
}
}
在這個代碼中,我們定義了一個計算屬性 fullName,表示一個人的全名。我們還定義了一個方法 greet,它使用了 fullName。在 Vue 實例中,我們可以直接使用 greet 方法,不需要單獨監聽 firstName 和 lastName,因為計算屬性 fullName 被響應式地同時監聽了 firstName 和 lastName。