vue watch 使用方法

目录

方法一：直接写一个监听处理函数

方法二：监听数据后面加字符串形式方法名

方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法

---

• 方法一：直接写一个监听处理函数，每次监听到属性值（如cityName）变化，执行此函数
• 方法二：监听数据后面加字符串形式方法名，方法名在 methods 中定义
• 方法三：使用 immediate（立即）属性和 handler （处理者）方法，deep 深度监测。如果只需要监听对象中的一个属性值，使用字符串形式监听对象属性名
• watch 特点

方法一：直接写一个监听处理函数

• 每次监听到属性值（如cityName）改变时，执行此函数

<input type="text" v-model="cityName"/>

export default{
  data () {
    return {
      cityName: '上海'
    }  
  },
  watch: {
    cityName(newVal, oldVal){
      this.cityName = newVal
    }
  }
}

方法二：监听数据后面加字符串形式方法名

• 方法名在 methods 中定义

export default{
  data () {
    return {
      cityName: '上海'
    }  
  },
  watch: {
    cityName: 'nameChange'
  },
  methods: {
    nameChange(newVal, oldVal){
      this.cityName = newVal
    }
  }
}

方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法

• watch 特点
  • 当值第一次绑定时不会执行监听函数
  • 只有值发生改变时才会执行监听函数
  • 如果需要第一次绑定时执行监听函数，使用 immediate 属性 boolean 类型
• 使用方法
  • 监听属性后面写成对象形式，包含 handler 方法和 immediate 属性
  • immediate 属性表示 watch 首次绑定时，是否执行 handler 方法
  • immediate 为 true 表示 watch 声明的时候，立即执行 handler 方法
  • immediate 值为 false 则和一般 watch 用法一样，在数据发生变化时才执行 handler 方法

export default{
  data () {
    return {
      cityName: '上海'
    }  
  },
  watch: {
    cityName: {
      handler(newVal, oldVal){
        this.cityName = newVal
      },
      immediate: true
    }
  }
}

deep 深度监听

• 当需要监听一个对象改变时，普通 watch 无法监听到对象内部属性变化
• 只有 data 中的数据才能够监听到对象内部属性变化
• watch 中使用 deep 属性，可以对对象中的属性进行深度监听

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

export default{
  data () {
    return {
      cityName: {id: 1, name: '上海'}
    }  
  },
  watch: {
    cityName: {
      handler(newVal, oldVal){
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      },
      immediate: true,
      deep: true,
    }
  }
}

• 设置 deep: true 可以监听到 cityName.name 变化
• 此时会给 cityName 所有属性都加上这个监听器
• 当对象属性较多时，每个属性值变化都会执行 handler 方法
• 如果只需要监听对象中的一个属性值，使用字符串形式监听对象属性名

export default{
  data () {
    return {
      cityName: {id: 1, name: '上海'}
    }  
  },
  watch: {
    'cityName.name': {
      handler(newVal, oldVal){
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      },
      immediate: true,
      deep: true,
    }
  }
}

• 数组（一维、多维）变化不需要通过深度监听
• 对象数组中对象属性变化需要进行深度监听
• watch 中不要使用箭头函数，因为箭头函数中的 this 是指向当前作用域