当数据发生变化时需要执行异步操作或开销较大的操作时，又或者当需要监听路由变化时候，watch更合适。

watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果。

当侦听的值是没有改变，只是改变其他不相关内容的时候，它不会重新计算，也有一个缓存机制，只有当改变了相关的内容才会重新计算。

data: {
   firstName: 'Leo',
   lastName: 'Alan',
   obj: {
       age: 12
   }
},
watch: {

  //第一种情况：
  // 监听firstName,当firstName发生变化时就会执行该函数
  firstName:function(newVal,oldVal) {
  // 注:如果mounted中没有改变firstName，初始化是不会执行的
  },

  //第二种情况：
  // 监听lastName
  lastName: {
     //handler函数名是固定的
     handler (newName, oldName) {
          // 执行需要的操作...
      },
     immediate: true // true: 初始化时就会先执行一遍该监听对应的操作    
  },

  //第三种情况：
  obj: {
     handler () {
         // 执行需要的操作...
     },
     deep: true // 该属性默认值为false
     /* 当被监听的值是对象，只有deep为true时，
       对应属性的值(obj.age)发生变化时才能触发监听事件，但是这样非常消耗性能*/
  },

 //第四种情况：
 // 监听对象具体的属性， deep就不需要设置为true了
 'obj.age': {
     handler () {
          // 执行需要的操作...
      }
   }
}

监听路由对象：

watch: {
  '$route': function(newroute, oldroute) {
     console.log(newroute, oldroute);
     /*可以在这个函数中获取到当前的路由规则字符串是什么，
     那么就可以针对一些特定的页面做一些特定的处理*/
   }
}

总结computed和watch的区别：

1.watch属性监听的值必须是在data中定义好的；但是computed是不需要在data定义好的；

2.watch和computed都有存在缓存，computed只有在相关依赖发生了变化的时候才会重新计算computed属性的值，watch也是在监听的属性发生了变化的时候才会执行；

3.watch在第一次刷新页面的时候，没有修改监听的属性值，watch语句不会执行（但是如果把immediate设置为true，刷新页面就会执行），但是如果是computed，第一次刷新页面时候，没有修改监听的属性值，也会执行一次。

4.watch适合当数据变化需要执行操作或者是监听的值发生改变以后需要做对应的操作，而computed适合计算已有的值并返回结果；

5.watch还可以被用来监听路由router的变化，只是这里的监听的元素是固定的；