vue3 数据监听(watch、watchEffect)

1、watch

1.1基本使用

作用:数据监听

语法:

watch(监听的数据, (改变后的数据, 改变前的数据) => {

console.log(newVal, oldVal);

})

注意点:watch写法上支持一个或者多个监听源,这些监听源必须只能是getter/effect函数,ref数据,reactive对象,或者是数组类型

javascript 复制代码
<template>
  <div>
    <h1>watch</h1>
    <p>name: {{ name }} <button @click="btn">修改名字</button></p>
    <p><input type="text" v-model="code" /> {{ code }}</p>
  </div>
</template>

<script setup>
import { ref,reactive,toRefs, watch } from 'vue';
  // 定义变量
  let name=ref('张三')
  const btn=()=>{
    name.value='李四'
  }
  // 监听单个数据
  watch(name,(newVal,oldVal)=>{
    //            李四 张三
    console.log(newVal,oldVal);
  })
  // 定义对象
  let res=reactive({
    code:200,
    data:[],
    massge:'ok'
  })
  const {code}=toRefs(res)
  // 监听对象
  watch(()=>res.code,(newVal,oldVal)=>{
    //            2001 200
    console.log(newVal,oldVal);
  })

  // 监听多个数据
  watch([name,()=>res.code],(newVal,oldVal)=>{
    //['张三', '2001'] ['张三', 200]
    console.log(newVal,oldVal);
  })
</script>

1.2、深度监听、立即监听

关键字:

deep:true 深度监听

immediate:true 立即监听

javascript 复制代码
<template>
  <div>
    <h1>watch</h1>
    <p><input type="text" v-model="res.user.name" /> {{ res.user.name }}</p>
  </div>
</template>

<script setup>
import { ref,reactive,toRefs, watch } from 'vue';
  // 定义对象
  let res=reactive({
    user:{
    	name:'张三'
    }
  })
  // 监听多个数据
  watch(()=>res.user,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
  },
  {deep:true,immediate:true})
</script>

2、watchEffect

watchEffect用来简化 watch,不需要指定监听对象

而是根据函数内的依赖,用到了什么 当它发生变化时,自动触发

watchEffect回调会立即执行 不需要指定immediate

javascript 复制代码
    <template>
        <div>
          <h1>watchEffect</h1>
          <p><input type="text" v-model.number="num1">
              <input type="text" v-model.number="num2">
          </p>
        </div>
      </template>

      <script setup>
      import { ref,watchEffect } from 'vue';
        let num1=ref(0);
        let num2=ref(1);

        watchEffect(()=>{
            console.log(num1.value+num2.value);
            console.log('执行啦watchEffect');
        })
      </script>
对比点 watch watchEffect
惰性 有惰性,不设置就不会立即执行 没有惰性,会立即执行
参数 语法上多个参数 不需要传递参数
获取值 可以获取到新旧值 不能获取到新旧值
相关推荐
程序员小白条4 分钟前
我的第二份实习,学校附近,但是干前端!
java·开发语言·前端·数据结构·算法·职场和发展
编程大全5 分钟前
2025年前端面试题
前端
萌萌哒草头将军16 分钟前
🔥🔥🔥 NuxtLabs 宣布加入了 Vercel !
前端·javascript·vue.js
LuciferHuang8 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing8 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20158 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言9 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手9 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言9 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen10 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang