Vue3中watch的用法

        watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑。

一、watch的基本实例





二、watch监听多个数据

getter 函数:





多个来源组成的数组





三、watch监听对象的值





四、watch监听器的配置参数

1.deep

用于开启深度监听





2.immediate

是否开启初始化检测,默认是值发生变化时,才会执行监听器里面的方法,开启immediate后初始化就执行一次。
 





五、通过watchEffect()简化watch

侦听器的回调使用与源完全相同的响应式状态是很常见的。例如:





我们可以使用watchEffect 函数来简化上面的代码。watchEffect() 允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为:





注:需要注意的是watchEffect 回调会立即执行,不需要指定immediate

六、watch vs. watchEffect

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:

  • watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。

  • watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。

七、回调触发机制与停止监听器

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: 'post' 选项:

watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})

停止监听

在 setup() 或 

你可能感兴趣的:(前端,javascript,vue.js)