Vue3 入门指北（十）侦听器

作者：Augus

2022 年 10 月 06 日
天津
本文字数：761 字
阅读完需：约 2 分钟

前言

在某些场景下，我们可能需要监听某一地方的结果去修改另一个地方的状态。我们就可以通过使用watch（）函数，来实现状态变化时，触发内部的回调函数。

watch()

在组合式 API 中，可以如下使用：

<script setup>import { ref, watch } from 'vue'
const num = ref(0)
// 可以直接侦听一个 refwatch(num, (newValue, oldValue) => {  // 执行相应的操作  ...})</script>
<template>  <p>{{ num }}</p></template>

复制代码

当然你也可以监听计算属性、响应式对象或者 getter 函数，也可以监听多个数据源：

// 多个来源组成的数组watch([x, () => y.value], ([newX, newY]) => {  console.log(`x is ${newX} and y is ${newY}`)})

复制代码

需要注意的一点是，不能把响应式对象的属性当作监听的数据源：

const math = reactive({ num: 0 })
watch(math.num, (value) => {  console.log(`结果是：${value}`)})

复制代码

如果想要监听的话，需要通过 getter 函数的形式：

watch(  () => math.num,  (value) => {    console.log(`结果是：${value}`)  })

复制代码

watchEffect()

熟悉 vue2 中的 watch 的同学，应该知道他是懒执行的，而 vue3 中也一样，只有当监听的数据源发生变化的时候，才会执行内部的回调。但是在某些情况下，我们可能需要在监听器创建时，执行一边回调。对于这种情况，我们就可以使用watchEffect()来解决。

const num = ref(0)const busNum = ref(0)
function add() {  busNum = num + 1}add()watch(num, add)

复制代码

针对如上的情况，我们就可以通过watchEffect简化。watchEffect会立即执行一百年回调函数，并且自动追踪并分析出响应源。

watchEffect( () => {  busNum = num + 1})

复制代码

所以说，如上的例子中，回调会立即执行，并且会把 num 作为监听的数据源，在每次num更新的时候，其内部的回调会再次执行。

watchEffect只会追踪同步代码，并分析数据源。

发布于: 刚刚阅读数: 5

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

Vue3 入门指北（十）侦听器

前言

watch()

watchEffect()

Augus

评论