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

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

如有错误,请多多指教

相关推荐
山河木马3 分钟前
前端学C++可太简单了:引用
前端·javascript·c++
江城开朗的豌豆4 分钟前
Vue 祖孙组件通信:3种实用方案,轻松搞定跨代传值!
前端·javascript·vue.js
独立开阀者_FwtCoder5 分钟前
Nginx 正式拥抱现代 JavaScript
前端·javascript·架构
独立开阀者_FwtCoder5 分钟前
Vue3 开发新选择:又一 Hooks 神库开源!
前端·javascript·vue.js
江城开朗的豌豆10 分钟前
Vue项目多代理配置指南:轻松搞定跨域请求分流!
前端·javascript·vue.js
全宝12 分钟前
🚀 一文搞定 claude code:国内环境下的安装、配置与体验
前端·ai编程·claude
寻觅~流光17 分钟前
封装---优化try..catch错误处理方式
开发语言·前端·javascript·typescript
csj5020 分钟前
前端基础之《Vue(22)—安装MongoDB》
前端·vue
今天也在写bug23 分钟前
输入npm install后发生了什么
前端·npm·node.js
玲小珑1 小时前
Next.js 教程系列(十六)Next.js 中的状态管理方案
前端·next.js