vue3之监听器

watch

使用案例

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

//侦听单个源
const count1 = ref(1)

const change = () => {
  count1.value = 12
}

watch(count1, () => {
  console.log('count1', count1.value) //监听的值
})

//侦听多个源
const count1 = ref(1)
const count2 = ref(2)
const count3 = ref(3)

const change = () => {
  count1.value = 12
  count2.value = 23
  count3.value = 34
}

watch([count1, count2, count3], (newVal, oldVal) => {
  console.log('count1', count1.value)
  console.log(newVal, oldVal) // 按监听顺序返回的数组
})

// 侦听reactive
// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`Count is: ${count}`)
  }
)

监听ref跟reactive的区别

保存对象的ref不会自动解包

const person = ref({name: "zhangsang"})

watch(person,() => {...})   //错误的写法
watch(person.value,() => {...})   //正确的写法 1
watch(person,() => {...},{deep:true})   //正确的写法 2 这种其实等效于1，因为ref最后也是一个reactive

reactive默认开启深度监听，监视reactive的属性，需要用getter的形式

const count4 = reactive({ count: 4 })

watch(() => count4.count, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

watch的第三个参数

• immediate, 布尔值，是否立即执行回调
• once，布尔值，是否只执行一次
• deep:是否深度监听
• flush 调整回调函数的刷新时机
  • pre: 默认值 侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。
  • post: 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM，你需要指明 flush: 'post'
  • sync: 你还可以创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发：
    • 同步侦听器不会进行批处理，每当检测到响应式数据发生变化时就会触发。可以使用它来监视简单的布尔值，但应避免在可能多次同步修改的数据源 (如数组) 上使用。

停止侦听

要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：

const unwatch = watchEffect(() => {})

// ...当该侦听器不再需要时
unwatch()

watchEffect

立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

特点： 无法更改的首次必须执行收集用到的依赖