Vue3学习（组合式API——Watch侦听器、watchEffect()详解）

岁岁岁平安2025-05-18 21:21

目录

一、Watch侦听器。

（1）侦听单个数据。

（2）侦听多个数据。（数组写法？！）

（3）immediate参数。(立即执行回调)

（3）deep参数。(深层监视)

使用deep开启深度侦听监视。（不仅监听对象的地址，还会监听对象的所有子属性变化）

（4）精确侦听对象(ref、reactive)的某个属性。（固定写法的简单回调：()=>xx对象）

一、Watch侦听器。

  • 官方解释：在组合式 API 中，使用 watch 函数在每次响应式状态发生变化时触发回调函数。
  • 基本作用：侦听一个或者多个数据的变化，数据变化时执行回调函数。其中有两个额外的参数：immediate（立即执行）、deep（深度侦听)。
（1）侦听单个数据。
  • 基本语法：watch(ref对象,(newValue,oldValue)=>{ ... })。
  • 代码示例。
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{count}}<button @click="changeCount">count+1</button>
    </div>

    <script type="module">
        import { createApp, ref, watch } from './vue.esm-browser.js'
        createApp({
            setup() {
                const count = ref(0)
                const changeCount = () => {
                    count.value++;
                }
                watch(count, (newValue, oldValue) => {
                    console.log('新值：' + newValue)
                    console.log('旧值：' + oldValue)
                })
                return {
                    count,
                    changeCount
                }
            }

        }).mount('#app')
    </script>

</body>

</html>
  • 效果。
（2）侦听多个数据。（数组写法？！）
  • 基本语法：watch([ref对象1,ref对象2...],(newArr,oldArr)=>{ ... })。
  • 代码示例。
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{count}}<button @click="changeCount">count+1</button>
        {{nickname}}<button @click="changeNickname">改昵称</button>
    </div>

    <script type="module">
        import { createApp, ref, watch } from './vue.esm-browser.js'
        createApp({
            setup() {
                const count = ref(0)
                const nickname = ref('张三')
                const changeCount = () => {
                    count.value++;
                }
                const changeNickname = () => {
                    nickname.value = '李四'
                }
                /* //监听单个数据
                watch(count, (newValue, oldValue) => {
                    console.log('新值：' + newValue)
                    console.log('旧值：' + oldValue)
                }) */
                //监听多个数据
                watch([count, nickname], (newArr, oldArr) => {
                    console.log('新数组：' + newArr)
                    console.log('旧数组：' + oldArr)
                })
                return {
                    count,
                    nickname,
                    changeCount,
                    changeNickname
                }
            }

        }).mount('#app')
    </script>

</body>

</html>
  • 效果。
（3）immediate参数。(立即执行回调)
  • 基本说明：在侦听器创建时------立即触发回调，响应式数据变化之后继续执行回调。
  • 代码示例。（一进页面里面执行回调！）
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{count}}<button @click="changeCount">count+1</button>
    </div>

    <script type="module">
        import { createApp, ref, watch } from './vue.esm-browser.js'
        createApp({
            setup() {
                const count = ref(0)
                const changeCount = () => {
                    count.value++;
                }

                //immediate，立即执行回调
                watch(count, (newValue, oldValue) => {
                    console.log('新值：' + newValue)
                    console.log('旧值：' + oldValue)
                }, {
                    immediate: true
                }
                )
                return {
                    count,
                    changeCount,
                }
            }

        }).mount('#app')
    </script>

</body>

</html>
  • 效果。
（3）deep参数。(深层监视)
  • 基本说明：其中默认的watch进行浅层监视（如：const ref1 = ref(简单类型)，可以直接监视）。默认的watch对于"const ref2 = ref(复杂类型)"，监视不到其内部数据的变化！
  • deep：true。开启监视侦听内部数据的变化。
  • 这种情况只有修改userInfo整个.value，修改了对象的地址才能侦听监视到。因为默认是浅层的。
使用deep开启深度侦听监视。（不仅监听对象的地址，还会监听对象的所有子属性变化）
  • 代码示例。
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{count}}<button @click="changeCount">count+1</button>
        <div>----------------------------------------------------</div>
        {{userInfo}}<button @click="changeUserInfo">修改userInfo</button>
    </div>

    <script type="module">
        import { createApp, ref, watch } from './vue.esm-browser.js'
        createApp({
            setup() {
                const count = ref(0)
                const userInfo = ref({
                    name: 'zs',
                    age: '18'
                })
                const changeCount = () => {
                    count.value++;
                }
                const changeUserInfo = () => {
                    userInfo.value.age++;
                }

                //浅层侦听
                watch(userInfo, (newValue) => {
                    console.log(newValue)
                },
                    {
                        deep: true
                    }
                )

                return {
                    count,
                    userInfo,
                    changeCount,
                    changeUserInfo
                }
            }

        }).mount('#app')
    </script>

</body>

</html>
  • 效果。
（4）精确侦听对象(ref、reactive)的某个属性。（固定写法的简单回调：()=>xx对象）
  • 基本说明：在不开启deep参数的前提下，侦听某个对象的某个属性的变化，且只有该值发生变化时才执行回调！
  • 代码示例。（ref创建的对象、reactive创建的对象）
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{userInfo}}<button @click="changeUserInfo">修改userInfo</button>
        <div>----------------------------------------------------</div>
        {{userInfo2}}<button @click="changeUserInfo2">修改userInfo2</button>
    </div>

    <script type="module">
        import { createApp, ref, watch, reactive } from './vue.esm-browser.js'
        createApp({
            setup() {
                const userInfo = ref({
                    name: 'zs',
                    age: '18'
                })
                const userInfo2 = reactive({
                    name: 'ls',
                    age: '30'
                })
                const changeUserInfo = () => {
                    userInfo.value.age++;
                }
                const changeUserInfo2 = () => {
                    userInfo2.name = 'wu'
                }

                //watch侦听
                watch(() => userInfo.value.age, (newValue, oldValue) => {
                    console.log('新' + newValue)
                    console.log('旧' + oldValue)
                })
                watch(() => userInfo2.name, (newValue, oldValue) => {
                    console.log('新' + newValue)
                    console.log('旧' + oldValue)
                })

                return {
                    userInfo,
                    userInfo2,
                    changeUserInfo,
                    changeUserInfo2
                }
            }

        }).mount('#app')
    </script>

</body>

</html>
  • 效果。

二、watchEffect()。

（1）基本介绍与主要特点。
  • 官方解释：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
  • 基本介绍：
  • watchEffect 是 Vue 3 中用于响应式数据监听的 API ，属于组合式 API 。
  • 它会立即执行传入的回调函数，并在其依赖的响应式数据变化时重新执行该函数。
  • 主要特点：
  • 自动追踪依赖：无需显式指定依赖项，watchEffect 会自动追踪在回调函数中使用的响应式数据。比如在回调中使用了某个 ref 或 reactive 定义的响应式数据，当该数据变化时，watchEffect 就能感知到并重新执行回调。
  • 响应式副作用处理：专注于处理副作用，只要依赖项发生变化，就会重新执行回调函数，确保获取到最新状态。像执行 DOM 更新、发起 API 请求等操作，都可以在 watchEffect 中进行。
  • 立即执行：与 watch 不同，watchEffect 会在组件初始化时就立即执行回调函数，不需要等到依赖的数据发生变化才执行。
（2）watchEffect()简单案例演示。
  • 代码。
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{count}}<button @click="increment">count++</button>
    </div>
    <script type="module">
        import { createApp, ref, watchEffect } from './vue.esm-browser.js'
        createApp({
            setup() {
                // 定义一个ref类型的响应式数据
                const count = ref(0);
                // 定义一个方法用于修改响应式数据
                const increment = () => {
                    count.value++;
                };

                // 使用watchEffect监听响应式数据变化
                watchEffect(() => {
                    //注意使用的是反引号``
                    console.log(`计数发生变化，当前值为: ${count.value}`);
                });
                return {
                    count,
                    increment
                }
            }
        }).mount('#app')
    </script>
</body>

</html>
  • 效果。
相关推荐
漫路在线27 分钟前
JS逆向-某易云音乐下载器
开发语言·javascript·爬虫·python
不爱吃糖的程序媛30 分钟前
浅谈前端架构设计与工程化
前端·前端架构设计
BillKu2 小时前
Vue3 Element Plus 对话框加载实现
javascript·vue.js·elementui
郝YH是人间理想2 小时前
系统架构设计师案例分析题——web篇
前端·软件工程
Evaporator Core2 小时前
深入探索：Core Web Vitals 进阶优化与新兴指标
前端·windows
向上的车轮2 小时前
MATLAB学习笔记（七）:MATLAB建模城市的雨季防洪排污的问题
笔记·学习·matlab
初遇你时动了情3 小时前
html js 原生实现web组件、web公共组件、template模版插槽
前端·javascript·html
QQ2740287563 小时前
Soundness Gitpod 部署教程
linux·运维·服务器·前端·chrome·web3
前端小崔3 小时前
从零开始学习three.js（18）：一文详解three.js中的着色器Shader
前端·javascript·学习·3d·webgl·数据可视化·着色器
哎呦你好3 小时前
HTML 表格与div深度解析区别及常见误区
前端·html
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU06Coze扣子平台完整体验和实践（附国内和国际版对比）07Ubuntu24.04安装中文输入法08DeepSeek各版本说明与优缺点分析09苍穹外卖面试总结10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）