• Vue3理解(9)


    侦听器

    1.计算属性允许我们声明性地计算衍生值,而在有些情况下,我们需要状态变化时执行一些方法例如修改DOM。

    2.侦测数据源类型,watch的第一个参数可以市不同形式的‘数据源’,它可以市一个ref(包括计算属性),一个响应式对象,一个getter函数或者多给数据源组成的数组,不可以直接侦测一个响应式对象的属性值。

    3.深层侦听器,直接给watch()传入一个响应式对象,会隐式地创建一个深层侦听器,该回调函数在所以嵌套的变更都会触发,深度侦测需要遍历所以被侦测的对象,当用于大型数据结构时,开销很大因此在必要时使用它。

    4.即时回调的侦听器,watch默认时懒执行,只有当数据发生变化时才触发回调,但是有的场景需要侦听器在创建的时候立即执行一次可以使用 immediate:true 来强制侦听器立即执行。

    5.watchEffect() 可以消除手动维护依赖列表的负担,如果你需要侦听一个数据结构中的几个属性,watchEffect()比深度侦听器更有效,因为它将只跟踪回调中使用到的属性,而不是递归跟踪所有属性,watchEffect仅会在其同步执行期间才会追踪依赖,在使用异步回调只有第一个await才会被追踪。

    6.watch和watchEffect都能响应地执行有副作用的回调,它们之间主要是追踪响应式依赖的方式,watch只追踪明确的数据源,它不会追踪任何在回调中访问到的东西,另外,仅在数据源确实改变才会触发,watch会避免在发生副作用时追踪依赖因此,我们能更准确地控制回调函数的触发时机,watchEffect则会在副作用发生期间追踪依赖,它会在同时执行过程中,自动追踪所有能访问到的响应式属性,这更方便,而且代码往往更简洁,使得响应式依赖关系会不那么明确。

    7.回调函数触发时机,当你更改了响应式状态,它可能会同时触发Vue组件更新和侦听器回调,默认情况下用户创建的侦听器会在Vue组件更新之前被调用,这意味侦听器中访问DOM是在Vue更新之前的状态,如果你想在Vue更新DOM之后需要指明 flush:'post' 选项。

    8.停止侦听器,在setup()或者