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事件)
  • 2
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

C+ 安口木

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值