- 使用方法
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进行渲染。
