vue 中的watch的高级用法

 <input type="text" v-model="testWatch.name">

<script>
  export default {
    data() {
      return {
        testWatch: {
          name: 'hello',
        },
   },
    watch: {
      testWatch: {
        handler(val, oldVal) {
          console.log(val.name, oldVal, 'val,oldVal')
        },
        deep: true,  // 深度检查  如果是对象可以检查各个属性对应的值的变化 否则需要使用testWatch.name 来检查
        immediate: true,  //  相当于立即执行   因此oldVal 可能是undefined  所以别使用oldVal .name
      },
      $route(to, from) {  // 监听路由变化 在 类似于  index.vue 中有  <router-link :to="{name: 'clubcardbuyconsume',params: { id: this.$store.state.curr_game_id}}"> 点击跳转 </router-link>才有效！
      if (this.$route.params.id) {
           alert('有id')
      }
   },
 },
}

</script>

值得一提的是，watch即使采用了 deep: true, 深度检查模式，也不能检测 一个对象的属性的添加；