计算属性就是vue实例里的computed属性，对应一个对象，里面可以放各种方法，方法的作用就是可以生成和数据变量对应的计算后的变量，跟数据相关的复杂逻辑变量，都可以使用计算属性实现，computed里的函数名，对外就是一个变量，默认是getter。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
</script>
如果想用setter，也可以手动添加。
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: {
get: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
},
set: function (newValue) {
this.message = newValue.split('').reverse().join('')
}
}
}
});
vm.reversedMessage = '12345';Vue实例中还提供了另外一个属性Watchers，用来观察变量的变化，如果有变量的值发生了改变，watch里的函数(和变量名一致)会触发。
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: {
get: function () {
// `this` points to the vm instance
console.log('我了');
return this.message.split('').reverse().join('')
},
set: function (newValue) {
this.message = newValue.split('').reverse().join('')
}
}
},
watch: {
message: function (newValue, oldValue) {
console.log(1);
console.log(newValue);
console.log(oldValue);
},
reversedMessage: function (newValue, oldValue) {
console.log(2);
console.log(newValue);
console.log(oldValue);
}
}
});
vm.reversedMessage = '12345';