坐忘道

Appearance

监视属性 ​

Vue中使用watch方法实现监视属性

概述 ​

当被监视的属性变化时, handler回调函数自动调用进行相关操作

handler函数有两个参数: newValue和oldValue

监视的属性必须在data中存在才能进行监视

特点 ​

  • 用于命令式地响应数据变化
  • 不需要返回值
  • 没有缓存, 每次变化都会执行
  • 可以访问变化前后的值
  • 可以执行异步操作
  • 可以深度监视对象(deep: true)
  • 可以立即执行回调 (immediate: true)

适用场景 ​

  • 需要在数据变化时执行异步操作
  • 需要执行开销较大的操作
  • 需要在变化时执行副作用(如调用API、操作DOM等)
  • 需要知道变化前后的具体值

使用方式 ​

Vue中实现监视属性有两种方式

  • 方式一
js
new Vue({
  el: '#app',
  data: {
    isChange: true
  },
  watch: {
    isChange: {
      handler(newValue, oldValue) {
        console.log('isChange change', newValue, oldValue)
      }
    }
  }
})
  • 方式二
js
const vm = new Vue({
  el: '#app',
  data: {
    isChange: true
  }
})
vm.$watch('isChange', {
  handler(newValue, oldValue) {
    console.log('isChange change', newValue, oldValue)
  }
})

简写形式 ​

  • 代码示例
js
new Vue({
  el: '#app',
  data: {
    isChange: true
  },
  watch: {
    isChange(newValue, oldValue) {
      console.log('isChange change', newValue, oldValue)
    }
  }
})

深度监视 ​

Vue中的watch默认不监视对象内部值的改变

配置deep: true可以监视对象内部值改变

配置immediate: true可以在初始化时执行handle函数

备注

  • Vue自身可以监视对象内部值的变化, 但是Vue提供的watch默认不可以
  • 使用watch时根据数据的具体结构来决定是否采用深度监视
  • 代码示例:
js
new Vue({
  el: '#app',
  data: {
    numbers: {
      a: 1,
      b: 2
    }
  },
  watch: {
    numbers: {
      immediate: true, // 初始化时立即执行 handler 函数
      deep: true, // 开启深度监视, 默认为 false
      handler(newValue, oldValue) {
        console.log('isChange change', newValue, oldValue)
      }
    }
  }
})

注意

深度监视不能使用简写方式