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

前天面试的时候，被问到“计算属性和侦听属性的区别”，当时一脸懵，我只知道计算属性和方法的区别。希望能帮到大家。

 

相同点：watch和computed都是在依赖的值发生改变时 发生自动变化

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

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

watch擅长的场景：当你想在一个数据改变时想要做什么时使用（一个数据影响多个数据的变化）；

computed擅长的场景：想要得到一个新的值时使用（一个数据受多个数据影响）。

当需要在数据变化时执行异步操作或开销较大时，首选watch.

演示
当一个值改变了需要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>