- 使用方法
computed可以添加很多實例屬性,這些屬性可以通過實例直接獲取到,是通過將作用函數作為屬性的getter,通過訪問屬性就能調用getter來返回值
所以使用的是屬性,而不是屬性聲明的函數;
<p>{{ message }}</p>
<p>Reversed Message : "{{ reverseMessage1 }}"</p>
<p>Reversed Message : "{{ reverseMessage2() }}"</p>
computed: {
reverseMessage1: function () {
return this.message.split('').reverse().join('');
},
}
methods: {
reverseMessage2: function () {
return this.message.split('').reverse().join('');
},
}
所以在上面代碼中模板中調用的是屬性所以不帶括號,而methods定義的是方法所以在使用的時候要加 ( ) ;
- getter與setter
computed中屬性定義的時候,若只定義一個函數則默認為getter函數,
若要定義setter可以使用{}聲明多個屬性方法
computed: {
newProperty: {
// getter
get: function () {
return this.msg + this.msg
},
// setter
set: function (newValue) {
this.msg = this.msg + newValue
}
}
}
調用setter函數的方法是vm.newProperty = 'newValue' 直接參數賦值即可
- 與method的不同
<input type="text" v-model="message">
<p>{{ message }}</p>
<p>{{ now1 }}</p>
<p>{{ now2 }}</p>
computed: {
now1: function () {
return Date.now();
}
},
methods: {
now2: function () {
return Date.now();
}
}
input標簽和message雙向綁定,當input內容發生變化,頁面會實時進行渲染
- method只要頁面有渲染就調用方法
當input內容變化,message更新,發生渲染所以now2也會發生變化 - computed會緩存數據只有當依賴的數據發生變化才會調用函數,
否則直接返回緩存的結果
當input內容變化,message更新,因為now1中return中沒有數據內容只會渲染一次,所以不會調用多一次屬性定義的函數。(其實是因為依賴沒有,也就不會再發生變化了)
- 與watched方法的不同
為了觀察數據變化然后做出相應行為,往往使用簡單直接的watched來管擦數據變化,然后對觀察的數據定義變化后要實行的函數
官方例子
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
這里為了讓firstName或者lastName發生變化時能讓fullName也一起變化,這個時候就要添加watch來觀察變化且對fullName數據進行更新,
這樣做很繁瑣,要定義多個方法來對一個數據進行更新。
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
使用computed不用專門建立watch來觀察變化,而是依賴于firstName和 lastName,當發生變化時就會調用函數來對fullName進行渲染。