计算属性computed是基于响应式进行缓存，所以在执行的时候效率高，且只执行一次，从缓存读取，除非data里面的数据有更改才重新调用。注意：计算属性里面必须要ruturn，否则无法拿到结果。计算属性本质是一个函数，当做属性来使用，调用时不要加（）
<div id="app"><div>{{reverseString}}</div><div>{{reverseString}}</div><div>{{reverseMessage()}}</div><div>{{reverseMessage()}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存*/var vm = new Vue({el: '#app',data: {msg: 'Nihao',num: 100},methods: {reverseMessage: function(){console.log('methods')return this.msg.split('').reverse().join('');}},computed: {reverseString: function(){console.log('computed')// return this.msg.split('').reverse().join('');var total = 0;for(var i=0;i<=this.num;i++){total += i;}return total;}}});</script>
侦听器 watch
使用watch来响应数据的变化一般用于异步或者开销较大的操作（定时器，ajax，dom中on事件）watch 中的属性 一定是data 中 已经存在的数据当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
<div id="app"><input type="text" v-model='firstName'><input type="text" v-model='lastName'><input type="text" v-model="msg"><div>{{fullName}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*侦听器 */var vm = new Vue({el: '#app',data: {firstName: 'lihan',lastName: 'Green',fullName: 'Jim Green',msg:'hello',obj:{a:1,b:2 }},method:{getList(){...}},computed: {/*用计算属性也能实现*//* fullName: function(){return this.firstName + ' ' + this.lastName;}*/},watch: {firstName: function(val) {this.fullName = val + ' ' + this.lastName;},lastName: function(val) {this.fullName = this.firstName + ' ' + val;},//监听obj.a的变化// 'obj.a':(n,o){ } //写法一'obj.a':{//写法二//handler是一个回调函数//handler:'getList' //上面定义的方法handler(n,o) {},//deep: true,//深度监听对象immediate: true//immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法}}});</script>
计算属性 和 方法 和 侦听器的区别和联系
一般是使用计算属性， 因为他有缓存methods一般是处理业务使用的， 只要手动调用了这个方法就会执行， 但是computed计算属性，因为他有缓存watch，是对我们data上面的一些数据进行 观察和响应； 一般的时候使用 计算属性替代watch；因为滥用watch的话，会影响性能。(最开始的Angularjs1.x 就有这个问题)。 但是watch有它自己的使用场景，别人不能替代。 当需要在数据变化时执行异步或开销较大的操作时 （js里面学过的异步任务：定时器 + ajax + dom事件）
如果觉得《vue计算属性computed和侦听属性watch的用法和区别》对你有帮助，请点赞、收藏，并留下你的观点哦！
