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

vue 专栏收录该内容
24 篇文章 1 订阅

区别

  1. 计算属性是依赖的值改变会重新执行函数,计算属性是取返回值作为最新结果,所以里面不能异步的返回结果。不能写异步逻辑。

  2. 侦听属性是侦听的值改变会重新执行函数,将一个值重新赋值作为最新结果,所以赋值的时候可以进行一些异步操作。

演示

当一个值改变了需要1s之后显示到页面中,通过watch可以轻松的实现

  <div id="app">
    <div>
      {{msg}}
    </div>
    <div>
      {{newValue}}
    </div>
    <button @click="handleClick">点击</button>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        newValue: ''
      },
      methods: {
        handleClick () {
          this.msg = 'hello1'
        }
      },
      watch: {
        msg (newValue) {
          setTimeout(() => {
            this.newValue = newValue
          }, 1000);
        }
      }
    })
  </script>

使用计算属性无法在里面写一些异步逻辑

  <div id="app">
    <div>
      {{msg}}
    </div>
    <div>
      {{newValue}}
    </div>
    <button @click="handleClick">点击</button>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        temp: ''
      },
      computed: {
        newValue () {
          if (this.temp) {
            // 不能写异步
            // setTimeout(() => {
            //   return msg
            // }, 1000);
            return this.msg
          } else {
            return this.temp
          }
        }
      },
      methods: {
        handleClick () {
          this.msg = 'hello1'
          this.temp = 'hello1'
        }
      }
    })
  </script>
  • 1
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

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

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

打赏作者

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

抵扣说明:

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

余额充值