简介
计算属性也是用来存储数据，但具有以下几个特点：
+ a.数据可以进行逻辑处理操作
+ b.对计算属性中的数据进行监视
依赖性
计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化
<body><div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> <p>{{reverseMsg}}</p> <button @click="change">改变</button></div><script type="text/javascript"> new Vue({
el:'#app',
data:{
msg:'hello world'
},
computed:{
reverseMsg:function(){
console.log("computed"); return this.msg.split(' ').reverse().join( );
}
},
methods:{
change(){ this.msg = "aaa bbb ccc";
}
}
});</script></body>123456789101112131415161718192021222324252627282930
点击 “改变”按钮后 
缓存性
计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行
<body><div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> <p>{{reverseMsg}}</p> <button @click="touch">点击</button></div><script type="text/javascript"> new Vue({
el:'#app',
data:{
msg:'hello world'
},
computed:{
reverseMsg:function(){
console.log("computed action"); return this.msg.split(' ').reverse().join( );
}
},
methods:{
touch(){
console.log(this.reverseMsg);
}
}
});</script></body>123456789101112131415161718192021222324252627282930因为一开始触发了一次计算属性reverseMsg，所以打印出了一句computed action 
点击了7次 “点击”按钮后
我们发现computed action没有再执行，只是输出了7次“world hello”
get和set
计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性 默认只有get，如果需要set，要自己添加123
<body><div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> <p>{{reverseMsg}}</p> <button @click="changeGet">改变Get</button> <button @click="changeSet">改变Set</button></div><script type="text/javascript"> new Vue({
el:'#app',
data:{
msg:'hello world'
},
computed:{
reverseMsg:{
get:function(){
console.log("computed get"); return this.msg.split(' ').reverse().join( );
},
set:function(data){ this.msg = data;
}
}
},
methods:{
changeGet(){ this.msg = "aaa bbb ccc";
},
changeSet(){ this.reverseMsg = "111 222 333";
}
}
});</script></body>123456789101112131415161718192021222324252627282930313233343536373839这里需要注意一点：在set函数里，我们只能改变绑定数据的值，比如这里的this.msg，从而间接改变reverseMsg的值。
相关文章
阅读推荐
精选导读
关注我们
