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

Question

区别

1. 计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。
2. 侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

演示

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

  <div>
    <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>
    <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>