Vue watch方法 侦听器

Vue

语法:

watch(侦听源,回调函数,选项)

1. 参数:

1. 侦听源可以取以下值:
   1. 一个响应式引用
   2. 一个数组, 每个元素都是响应式引用
   3. 一个方法
      1. 要求返回是一个响应式对象的监听源
2. 回调函数的参数有两个:
   1. 新的值
   2. 旧的值

1.1. 选项:

选项是可省的, 是一个对象

特殊意义的键值对:

1. flush: 'sync'
   1. 功能: 多个侦听源同时改变的时候, 侦听器会触发多次
      1. 默认只触发一次
   2. 不过不推荐使用, 更推荐使用nextTick
2. flush: 'post'
   1. 功能: 在变量更新之后, 再调用回调函数
      1. 默认在变量更新之前调用
3. deep: true
   1. 功能: 能够监听对象监听源的深层属性的变化
      1. 默认只能监听对象第一层属性值的更改

特殊意义的方法:

• child::onTrack
  • 以watch目标的响应式变量为目标
• child::onTrigger
  • 以watch目标的响应式变量为目标

实例:

1. 监听对象的深层属性:

const state = reactive({ 
  id: 1,
  attributes: { 
    name: '',
  }
})
 
watch(
  () => state,
  (state, prevState) => {
    console.log('not deep', state.attributes.name, prevState.attributes.name)
  }
)
 
watch(
  () => state,
  (state, prevState) => {
    console.log('deep', state.attributes.name, prevState.attributes.name)
  },
  { deep: true }
)
 
state.attributes.name = 'Alex' // 日志: "deep" "Alex" "Alex"

2. 说明:

1. base::reactive()