vue计算属性computed和侦听属性watch的用法和区别

计算属性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>

计算属性 和 方法 和 侦听器的区别和联系

1. 一般是使用计算属性， 因为他有缓存
2. methods一般是处理业务使用的， 只要手动调用了这个方法就会执行， 但是computed计算属性，因为他有缓存
3. watch，是对我们data上面的一些数据进行 观察和响应； 一般的时候使用 计算属性替代watch；因为滥用watch的话，会影响性能。(最开始的Angularjs1.x 就有这个问题)。 但是watch有它自己的使用场景，别人不能替代。 当需要在数据变化时执行异步或开销较大的操作时 （js里面学过的异步任务：定时器 + ajax + dom事件）