Vue数据监听器watch和watchEffect的使用.docxVIP

第

Vue数据监听器watch和watchEffect的使用

目录watch()函数watchEffect()函数watch与watchEffect之间的联系与区别我们都知道监听器的作用是在每次响应式状态发生变化时触发，在组合式API中，我们可以使用watch()函数和watchEffect()函数,

当你更改了响应式状态，它可能会同时触发Vue组件更新和监听器回调。

默认情况下，用户创建的监听器回调，都会在Vue组件更新之前被调用。这意味着你在监听器回调中访问的DOM将是被Vue更新之前的状态。

那么，我们来看一下，怎么才能好好的使用他们呢？他们之间又有什么区别呢？

watch()函数

watch需要侦听特定的数据源，比如侦听一个ref，watch的第一个参数可以是不同形式的数据源：它可以是一个ref(包括计算属性)、一个响应式对象、一个getter函数、或多个数据源组成的数组，如下：

constx=ref(0)

consty=ref(0)

//单个ref

watch(x,(newX)={

console.log(`xis${newX}`)

//getter函数

watch(

()=x.value+y.value,

(sum)={

console.log(`sumofx+yis:${sum}`)

//多个来源组成的数组

watch([x,()=y.value],([newX,newY])={

console.log(`xis${newX}andyis${newY}`)

constobj=reactive({count:0})

//传入一个响应式对象

watch(obj,(newValue,oldValue)={

//在嵌套的属性变更时触发

//注意：`newValue`此处和`oldValue`是相等的

//因为它们是同一个对象！

obj.count++

watch(

()=obj.count,

(newValue,oldValue)={

//注意：`newValue`此处和`oldValue`是相等的

//*除非*obj.count被整个替换了

{deep:true}

注意，你不能直接侦听响应式对象的属性值

constobj=reactive({count:0})

//错误，因为watch()得到的参数是一个number

watch(obj.count,(count)={

console.log(`countis:${count}`)

这里需要用一个返回该属性的getter函数：

//提供一个getter函数

watch(

()=obj.count,

(count)={

console.log(`countis:${count}`)

watch默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建监听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。

我们可以通过传入immediate:true选项来强制监听器的回调立即执行：

watch(source,(newValue,oldValue)={

//立即执行，且当`source`改变时再次执行

},{immediate:true})

watchEffect()函数

watchEffect()允许我们自动跟踪回调的响应式依赖。

consttodoId=ref(1)

constdata=ref(null)

watchEffect(async()={

constresponse=awaitfetch(

`/todos/${todoId.value}`

data.value=awaitresponse.json()

这个例子中，回调会立即执行，不需要指定immediate:true。在执行期间，它会自动追踪todoId.value作为依赖（和计算属性类似）。每当todoId.value变化时，回调会再次执行。有了watchEffect()，我们不再需要明确传递todoId作为源值。

watchEffect()适合有多个依赖项的监听器对于这种只有一个依赖项