Watch监听器的使用

一.简单数据类型

代码:

<template>
  <div>
    <div class="">
      {
   { name }}
    </div>
    <button @click="fn"> 点击   </button>
  </div>

</template>

<script>
export default {
  name: '',
  data() {
    return {
      name: '张三'
    }
  },
  watch: {
    name(newVal, oldVal) {
      console.log(newVal, '新值')
      console.log(oldVal, '旧值')
    }
  },
  methods: {
    fn() {
      this.name = 123
    }
  }
}
// watch窃听器
</script>

<style scoped>

</style>

二.监听复杂数据类型

<template>
  <div>
    <div class="">
      {
   { obj.name }}
    </div>
    <button @click="fn"> 点击   </button>
  </div>

</template>

<script>

export default {
  name: '',
  data() {
    return {
      obj: {
        name: '张三'
      }
    }
  },
  watch: {
    obj: {
      // deep: true,
      handler(newval, oldval) {
        console.log(newval, '新值')
        console.log(oldval, '旧值')
      }
    }

  },
  methods: {
    fn() {
      this.obj.name = 123
    }
  }
}
// watch窃听器
</script>

<style scoped>

</style>

有人会说需要开启深度监听

<template>
  <div>
    <div class="">
      {
   { obj.name }}
    </div>
    <button @click="fn"> 点击   </button>
  </div>

</template>

<script>

export default {
  name: '',
  data() {
    return {
      obj: {
        name: '张三'
      }
    }
  },
  watch: {
    obj: {
      deep: true,
      handler(newval, oldval) {
        console.log(newval, '新值')
        console.log(oldval, '旧值')
      }
    }

  },
  methods: {
    fn() {
      this.obj.name = 123
    }
  }
}
// watch窃听器
</script>

<style scoped>

</style>

 确实开启深度监听可以监听到。

但是不开启就监听不到了吗？

答案,非也

看下面的代码:

<template>
  <div>
    <div class="">
      {
   { obj.name }}
    </div>
    <button @click="fn"> 点击   </button>
  </div>

</template>

<script>

export default {
  name: '',
  data() {
    return {
      obj: {
        name: '张三'
      }
    }
  },
  watch: {
    obj: {
      handler(newval, oldval) {
        console.log(newval, '新值')
        console.log(oldval, '旧值')
      }
    }

  },
  methods: {
    fn() {
      this.obj = {
        age: 20

      }
    }
  }
}
// watch窃听器
</script>

<style scoped>

</style>

视图：

 可以看出不开启深度监听也是可以监听到的。

为什么一直能监听一种不能监听呢？

通过改变的情况进行对比可以发现,第二种改变直接重新赋值了一个对象也就是改变了地址。

用0001 表示他的栈  当赋值一个新的对象的时候,生成一个新的堆 栈也会生成一个新的。

因此:我们得出一个结论,watch默认监听的是栈的变化。开启deep:true 深度监听,栈的变化和堆的变化都可以监听到。

这就是我们在检查一个普通的数据类型的时候为什么能够轻易监听的原因。

<template>
  <div>
    <div class="">
      {
   { name }}
    </div>
    <button @click="fn"> 点击   </button>
  </div>

</template>

<script>
export default {
  name: '',
  data() {
    return {
      name: '张三'
    }
  },
  watch: {
    name(newVal, oldVal) {
      console.log(newVal, '新值')
      console.log(oldVal, '旧值')
    }
  },
  methods: {
    fn() {
      this.name = 123
    }
  }
}
// watch窃听器
</script>

<style scoped>

</style>

用示意图来表示:

三.只有当值改变的时候才去监听吗？

   immediate: true  

   立即实现监听

<template>
  <div>
    <div class="">
      {
   { obj.name }}
    </div>
    <button @click="fn"> 点击   </button>
  </div>

</template>

<script>

export default {
  name: '',
  data() {
    return {
      obj: {
        name: '张三'
      }
    }
  },
  watch: {
    obj: {
      immediate: true,
      handler(newval, oldval) {
        console.log(newval, '新值')
        console.log(oldval, '旧值')
      }
    }

  },
  methods: {
    fn() {
      this.obj = {
        age: 20

      }
    }
  }
}
// watch窃听器
</script>

<style scoped>

</style>

四.总结

在监听复杂数据的时候开启

depp:true 

即可