vue侦听器watch基本使用

一.watch概述:

vue提供的一个响应数据变化的通用方法,一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性,当需要在数据执行异步或开销较大的操作时,这个方法最有效.

语法:

// newVal :当前值   oldVal: 上一刻值

watch: {
    "被侦听的属性名" (newVal, oldVal){
        
    }
}

实列代码:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

二.vue侦听器-深度侦听和立即执行

immediate,立即执行,进入页面就触发

deep:true, 深度侦听复杂类型内的变化

handler:    固定方法触发

语法:

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

 实列代码:

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>

<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal){
        // user里的对象
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style>

</style>