computed 和 watch 的差异？

一、写在前面
以前只知道computed和watch存在一些差异，只知道在缓存上的一些差异，今天总结一下具体的不同。
二、computed
2.1、依赖缓存，只有依赖的数据发生改变才进行改变

  <div id="app">
    <h1>{{ fullName }}</h1>
    <h1>{{ fullName }}</h1>
    <h1>{{ fullName }}</h1>
    <h1>{{ fullName }}</h1>
    <h1>{{ fullName }}</h1>
    <h1>{{ fullName }}</h1>
    <button @click="changeName">点击更改</button>
  </div>

  <script src="../JS/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'dmc',
        lastName: 'dl'
      },
      computed: {
        fullName() {
          console.log('执行计算属性')
          return this.firstName + this.lastName
        }
      }
    })
  </script>

如上述代码所示， 我们访问多次fullName此时只触发一次fullName计算属性的执行。
2.2、如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed。

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'dmc',
        lastName: 'dl'
      },
      computed: {
        fullName() {
          return this.firstName + this.lastName
        }
      }
    })
  </script>

正如上述所示，此时fullName依赖firstName和lastName的值。
2.3、如果computed属性的属性值是和拿书，那么默认使用get方法，函数的返回值就是属性值，在computed中，属性有一个get方法和set方法，当数据发生变化时，就会调用set方法。
三、watch
3.1、watch不支持缓存，当数据改变就触发

  <script>
    new Vue({
      el: '#app',
      data: {
        name: '张三'
      },
      watch: {
        name: {
          handler(newValue) {
            console.log(newValue)
          }
        }
      }
    })
  </script>

如上述代码所示，当我们改变name的值的时候，就会触发watch中的name的hander方法。
3.2、watch监听函数接收另个参数，第一个参数是最新的值，第二个参数是变化之前的值。
3.3、当一个属性发生变化时，就需要执行相应的操作
3.4、监听数据必须是data中声明的数据或者props中的数据，当发生变化时，会触发其他操作，函数中存在两个参数，immediate和deep。
四、总结

computed计算属性，依赖其他属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取
computed的值时才会重新计算computed的值。
watch监听器，更多的是观察的作用，无缓存性，类细雨某些数据的监听回调，每当监听的数据变化时都会执行
回调进行后续操作。

五、运用场景

5.1、当需要进行数值计算，并且依赖其他属性时，应该使用computed，因为可以利用computed的缓存特性，
避免每一次获取数值时都要重新计算。
5.2、当需要在数据发生变化时，执行异步操作或者开销较大的操作时，应当使用watch。