思考一下：假设我们有如下的需求，我想把一个字符型的变量反转并显示到页面你该怎么做？
我们可以这么写：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>首先代码是没问题，但是这只是一个非常简单的需求，如果对这个message变量的处理很复杂呢？你不能写个十行八行的代码放到模板中吧？当然你愿意写我也没有意见，就是有点傻罢了。
那怎么才能使代码简洁明朗？还不傻？我们可以把这些逻辑放到一个function中对吧，然后再模板中调用。你就这么写了：
<div id="example">
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>ar vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})非常棒了有木有，比把逻辑都写在模板中好多了是吧，但是vue官方给我们提供了computed属性，那么它跟普通的方法有什么区别呢？我们先看看它的写法：
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})感觉没什么区别对吧，感觉跟写在methods中的普通方法一样，那如果一样人家给你这个干嘛？吃饱了撑的？所以我们看看官方的解释：
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
简单的说呢，就是computed 里的方法，只执行一次，不管你调用多少次，大家可以试着写个例子，然后再computed 方法中打个debugger看看是不是不论调用多少次都只调用一次，我试了，确实只走一次。比如你可以这样写
<div id="example">
<button @click="clickCompute">调用compute方法</button>
<button @click="clickMethods">调用普通方法</button>
</div>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
clickCompute: function () {debugger
console.log('我是computed中的方法！')
}
},
methodsL{
clickMethods:function(){debugger
console.log('我是methods中的方法！') }
}
})把f12打开，你点按钮试试，看看这个断点是不是每次调用都会进入断点呢？
相信看到这里，你已经有一定的了解吧~ 加油，奥利gay！
