计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新。
首先来看看计算属性的使用(效果图)：
10-计算属性.gif
<body>
<div id="app">
<input type="text" v-model="msg">
<p>原始字符：{{msg}}</p>
<p>计算属性翻转字符：{{reverseMsg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'Hello'
},
//vue的计算属性
computed:{
reverseMsg(){
//返回翻转后的字符串，当msg变化后reverseMsg会跟着变化
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
其实计算属性能做的，methods属性和watch属性同样也能做，现在我们就来说说他们的区别：
computed 和methods 属性的区别：
- 当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性，计算属性是基于它们的依赖进行缓存的
- 而method，就是当页面重新渲染的时候（页面元素的data变化，页面就会重新渲染），都会重新调用method
computed 和watch 属性的区别：
- 计算属性是计算属性，观察是观察。计算属性顾名思义就是通过其他变量计算得来的另一个属性，而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以检测页码执行获取数据的函数。
- 当你想要在数据变化响应时，执行异步操作或开销较大的操作，使用watch这是很有用的。
计算属性的写法有2种，一种是没有setter写法，一种是有setter的写法
没有setter的写法，性默认只有getter方法：
<script>
new Vue({
el:'#app',
data:{
msg:'Hello'
},
//vue的计算属性
computed:{
//默认这是getter方法
reverseMsg(){
//返回翻转后的字符串,这个返回值就是变量reverseMsg的值
return this.msg.split('').reverse().join('')
}
}
})
</script>
10-计算属性-没有setter.gif
有setter的写法:(注意，此setter和getter再vue的计算属性中的写法是set和get)
<body>
<div id="app">
<input type="text" v-model="msg">
<p>原始字符：{{msg}}</p>
<p>计算属性翻转字符：{{reverseMsg}}</p>
</div>
<script>
var vueObj =new Vue({
el:'#app',
data:{
msg:'Hello'
},
//vue的计算属性
computed:{
reverseMsg:{
get(){
//返回翻转后的字符串,这个返回值就是变量reverseMsg的值
return this.msg.split('').reverse().join('')
},
set(newValue){
this.msg = newValue
}
}
}
})
</script>
</body>
10-计算属性-有setter.gif
计算属性getter不执行的情况：
当包含计算属性的节点被移除，并且模板中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行。
