【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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

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

如有错误,请多多指教

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互