Vue3中watch用法

在 Vue3 中的组合式 API 中,watch 的作用和 Vue2 中的 watch 作用是一样的,他们都是用来监听响应式状态发生变化的,当响应式状态发生变化时,都会触发一个回调函数。

当需要在数据变化时执行异步或开销较大的操作时,computed是无法操作异步数据的,所以需要使用watch进行侦听。

侦听器watch作用是侦听一个或多个数据的变化,数据变化时执行的回调函数,两个额外参数:immediate(立即执行)和deep(深度侦听)
官网传送门

watch 基本使用

javascript 复制代码
<script setup lang="ts">
import { ref, watch } from 'vue'

const message = ref(0)
watch(message, (newValue, oldValue) => {
  console.log('新的值:', newValue)
  console.log('旧的值:', oldValue)
})
const changeMsg = () => {
  message.value++
}
</script>
<template>
  <p>{{ message }}</p>
  <button @click="changeMsg">更改 message</button>
</template>

上段代码中我们点击按钮就会更改响应式变量 message 的值。我们又使用 watch 监听器监听了 message 变量,当它发生变化时,就会触发 watch 监听函数中的回调函数,并且回调函数默认接收两个参数:新值和旧值。

watch 监听类型

ref 和计算属性

javascript 复制代码
<script setup lang="ts">
import { ref, watch, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch(doubleCount, (newValue, oldValue) => {
  console.log('新的值:', newValue)
  console.log('旧的值:', oldValue)
})
const changeCount = () => {
  count.value++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

当我们 count 发生变化时,计算属性 doubleCount也会重新计算得出新的结果,我们 watch 监听函数是可以监听到计算属性变化的。

getter 函数

javascript 复制代码
<script setup lang="ts">
import { ref, watch, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch(
  () => count.value + doubleCount.value,
  (newValue, oldValue) => {
    console.log('新的值:', newValue)
    console.log('旧的值:', oldValue)
  }
)
const changeCount = () => {
  count.value++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

上段代码中 watch 监听器中的第一个参数是一个箭头函数,也就是 getter 函数,getter 函数返回的是响应式数据 count 和 doubleCount 相加的值,当这两个中中有一个变化,都会执行 watch 中的回调函数。有点像是直接把计算属性写到监听器里面去了。

监听响应式对象

javascript 复制代码
<script setup lang="ts">
import { reactive, watch } from 'vue'

const count = reactive({ num: 0 })
watch(count, (newValue, oldValue) => {
  console.log('新的值:', newValue)
  console.log('旧的值:', oldValue)
})
const changeCount = () => {
  count.num++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

当 watch 监听的是一个响应式对象时,会隐式地创建一个深层侦听器,即该响应式对象里面的任何属性发生变化,都会触发监听函数中的回调函数。

监听多个来源的数组

javascript 复制代码
<script setup lang="ts">
import { ref, watch, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch([count, doubleCount], (newValue, oldValue) => {
  console.log('新的值:', newValue)
  console.log('旧的值:', oldValue)
})
const changeCount = () => {
  count.value++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

深度监听

在前面的代码中,如果我们将一个响应式对象传递给 watch 监听器时,只要对象里面的某个属性发生了变化,那么就会执行监听器回调函数。

究其原因,因为我们传入响应对象给 watch 时,隐式的添加一个深度监听器,这就让我们造成了我们牵一发而至全身的效果。

但是,如果我们是使用的 ref响应式对象的形式,那么响应式对象的属性值发生变化,是不会触发 watch 的回调函数的。

javascript 复制代码
<script setup lang="ts">
import { ref, watch, computed } from 'vue'

const count = ref({ num: 0 })
watch(
  count,
  (newValue, oldValue) => {
    console.log('新的值:', newValue)
    console.log('旧的值:', oldValue)
  }
)
const changeCount = () => {
  count.value.num++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

上段代码中我们使用 ref响应式对象,当我们更改 number 中 count 的值时,watch 的回调函数是不会执行的。

为了实现上述代码的监听,我们可以手动给监听器加上深度监听的效果。

javascript 复制代码
<script setup lang="ts">
import { ref, watch, computed } from 'vue'

const count = ref({ num: 0 })
watch(
  count,
  (newValue, oldValue) => {
    console.log('新的值:', newValue)
    console.log('旧的值:', oldValue)
  },
  { deep: true }
)
const changeCount = () => {
  count.value.num++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

immediate

在侦听器创建时立即触发回调,响应式数据变化之后继续执行回调,用法如下:

javascript 复制代码
<script setup lang="ts">
import { ref, watch } from 'vue'

const count = ref({ num: 0 })
watch(
  count,
  (newValue, oldValue) => {
    console.log('新的值:', newValue)
    console.log('旧的值:', oldValue)
  },
  { immediate: true }
)
const changeCount = () => {
  count.value.num++
}
</script>
<template>
  <p>{{ count }}</p>
  <button @click="changeCount">更改 count</button>
</template>

watch监听回调函数会再创建时立即执行

提示

前面我们一直强调 watch 监听的是响应式数据,如果我们监听的数据不是响应式的,那么可能会抛出如下警告:

bash 复制代码
runtime-core.esm-bundler.js:41 [Vue warn]: Invalid watch source:  123 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <ElMain> 
  at <ElContainer> 
  at <ElContainer class="layout-container" > 
  at <LayoutPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <RouterView> 
  at <App>

相关推荐
会豪44 分钟前
Electron-Vite (一)快速构建桌面应用
前端
中微子1 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶1 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子1 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark1 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23331 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_2 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit2 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言