【Vue3】watchEffect的使用

文章目录


watchEffect简介

**官网解释:**立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行该函数。

watch对比watchEffect

  1. 相同的是都能监听响应式数据的变化,不同的是监听数据变化的方式不同
  2. watch:要明确指出监听的数据
  3. watchEffect:不用明确指出坚挺的数据(函数中用到哪些属性,就监听哪些属性)

代码展示

bash 复制代码
<template>
    <div class="itemStyle">
       <div>
           数量:<input type="text" v-model="num">
       </div>
        <div>
            <button type="button" @click="handleAddNum">添加数量</button>
        </div>
    </div>
</template>

<script setup lang="ts" name="item">
    import {ref, reactive, toRefs, toRef, watch, watchEffect} from "vue"

    let num = ref(0)

    const handleAddNum = ()=>{
        num.value++
    }
    //watchEffect的使用
    let stopWatchEffect = watchEffect(()=>{
        if(num.value>5){
            console.log("数量已到达",num.value);
            console.log("可以发起请求,停止监听");
            stopWatchEffect()
        }
        console.log("新值:",num.value);
    })

</script>

✨ 踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复

如有错误,请多多指教

相关推荐
小小爱大王1 分钟前
AI 编码效率提升 10 倍的秘密:Prompt 工程 + 工具链集成实战
java·javascript·人工智能
半生过往1 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听4 分钟前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle5 分钟前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎8 分钟前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特8 分钟前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle9 分钟前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落9 分钟前
HTML5 音乐敲击乐静态界面
前端
海在掘金611279 分钟前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户479492835691510 分钟前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全