计算属性computed和watch的区别

• 计算属性是基于它们的响应式依赖进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数 多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

应用场景：一个数据受多个数据影响

• 使用watch来响应数据的变化
• 一般用于异步或者开销较大的操作
• watch 中的属性 一定是data 中 已经存在的数据
• 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

 应用场景：监听单个变量或一个数组

<div id="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <p>全名：{{fullName}}</p>
    </div>
    <script>
      // 监听器能够用来监听data中数据的变化，并且执行相应的操作
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: '李',
          lastName: '白',
          // 定义变量来接受新的全名
          fullName: ''
        },
        // 创建监听器在watch属性中
        watch: {
          // 要监听谁，就将该变量拿过来作为一个函数名字, 这个函数中带有newVal, 
          和 oldVal两个参数，参数名字随意
          firstName(newVal, oldVal) {
            console.log(newVal, oldVal);
            this.fullName = newVal + this.lastName
          },
          lastName(newVal, oldVal) {
            this.fullName = this.firstName + newVal
          }
        }

        // watch 和 computed对比
        // 1. computed性能比watch更好，我们能用computed实现就用computed去实现
        // 2. 涉及到异步数据的时候，就需要用watch
      })
    </script>



  watch: {
    cityName: {
      handler(newName, oldName) {      // ...    },
    deep: true,
    immediate: true
    }
  }