【Vue3】watch的五种使用情况与watchEffect

最新推荐文章于 2024-08-15 01:13:27 发布
最新推荐文章于 2024-08-15 01:13:27 发布
阅读量867 收藏 14
点赞数 29
分类专栏： vue 文章标签： vue.js javascript 前端 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jerryqjr/article/details/138339460
版权

【watch】

  • 作用：监视数据的变化（和Vue2中的watch作用一致）
  • 特点：Vue3中的watch只能监视以下四种数据：
  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值（getter函数）。
  4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

情况一

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

<template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
    if(newValue >= 10){
      stopWatch()
    }
  })
</script>

* 情况二

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

  • 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

  • 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let person = ref({
    name:'张三',
    age:18
  })
  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    person.value = {name:'李四',age:90}
  }
  /* 
    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
    watch的第一个参数是：被监视的数据
    watch的第二个参数是：监视的回调
    watch的第三个参数是：配置对象（deep、immediate等等.....） 
  */
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  },{deep:true})
  
</script>

* 情况三

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr>
    <h2>测试：{{obj.a.b.c}}</h2>
    <button @click="test">修改obj.a.b.c</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
  // 数据
  let person = reactive({
    name:'张三',
    age:18
  })
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    Object.assign(person,{name:'李四',age:80})
  }
  function test(){
    obj.a.b.c = 888
  }

  // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的,也可以使用第三个参数{deep:false}关闭
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  })
  watch(obj,(newValue,oldValue)=>{
    console.log('Obj变化了',newValue,oldValue)
  })
</script>

* 情况四

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

  1. 若该属性值不是【对象类型】，需要写成函数形式。
  2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

<template>
  <div class="person">
    <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
  /* watch(()=> person.name,(newValue,oldValue)=>{
    console.log('person.name变化了',newValue,oldValue)
  }) */

  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
  watch(()=>person.car,(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
</script>

* 情况五

监视上述的多个数据

<template>
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况五：监视上述的多个数据
  watch([()=>person.name,person.car],(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})

</script>

3.10. 【watchEffect】

  • 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

  • watch对比watchEffect

    1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

    2. watch：要明确指出监视的数据

    3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

  • 示例代码：

    <template>
  <div class="person">
    <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
    <h2 id="demo">水温：{{temp}}</h2>
    <h2>水位：{{height}}</h2>
    <button @click="changePrice">水温+1</button>
    <button @click="changeSum">水位+10</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch,watchEffect} from 'vue'
  // 数据
  let temp = ref(0)
  let height = ref(0)

  // 方法
  function changePrice(){
    temp.value += 10
  }
  function changeSum(){
    height.value += 1
  }

  // 用watch实现，需要明确的指出要监视：temp、height
  watch([temp,height],(value)=>{
    // 从value中获取最新的temp值、height值
    const [newTemp,newHeight] = value
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(newTemp >= 50 || newHeight >= 20){
      console.log('联系服务器')
    }
  })

  // 用watchEffect实现，不用
  const stopWtach = watchEffect(()=>{
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(temp.value >= 50 || height.value >= 20){
      console.log(document.getElementById('demo')?.innerText)
      console.log('联系服务器')
    }
    // 水温达到100，或水位达到50，取消监视
    if(temp.value === 100 || height.value === 50){
      console.log('清理了')
      stopWtach()
    }
  })
</script>
Jerry_ww
关注
专栏目录
[vue2/vue3] 详细剖析watch、computed、watchEffect的区别，原理解读
共同学习，共同成长
07-01 2072
watch​适用于需要有条件地监听数据变化的场景，computed​适用于创建派生数据和性能优化，而watchEffect适用于自动追踪依赖的场景。在实际应用中，根据具体需求选择合适的API可以更好地发挥Vue的响应式能力。
Vue3 - watchEffect 使用教程
王佳斌
11-17 2753
Vue3官方文档，vue3.js watchEffect 官方文档教程，Vue3中 watch、watchEffect，vue3之watchEffect详解，一文搞懂Vue3中watchEffect侦听器的使用，浅谈Vue3中watchEffect的具体用法，Vue3中的watchEffect怎么应用，vue3 watch和watchEffect的使用，Vue@3-watchEffect 使用基础，Vue3中的watchEffect，【Vue3】Vue3中监视watch和watchEffect使用，VUE3
vue3中的watch使用
Lilico_的博客
04-30 1090
基本用法： <template> <div> name: {{obj.name}} <br> list: <ul> <li v-for="(item, index) in obj.list" :key="index"> {{item}} </li> </ul> <hr> <button @click="changeName">改变
最新版本Vue3的学习笔记-第三章(下部)
apple_51927114的博客
12-25 1135
什么是hook？—— 本质是一个函数，把setup函数中使用的进行了封装，类似于vue2.x中的mixin。自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。useSum.ts})//向外部暴露数据useDog.ts// 方法try {// 发请求// 维护数据// 处理错误// 挂载钩子getDog()})//向外部暴露数据当前求和为：{{sum}}
一篇文章搞懂Vue3中的watch
AQiukai的博客
08-15 5246
本文主要讲解Vue3中的watch，关于watch使用时会遇到的比较常见的相关的四种情况。
Vue3中watch的用法
ct5211314的博客
04-03 1万+
watch函数用于侦听某个值的变化，当该值发生改变后，触发对应的处理逻辑。
Vue3的watch使用介绍及场景
一个努力不被优化的程序员
11-20 4697
目录一、watch的使用1. 监听一个变量2. 监听一个对象的属性3. 监听一个函数的返回值二、watch的使用场景1. 监听表单的变化2. 监听路由参数的变化3. 监听Vuex中的数据变化三、watch的效果图四、watch的示例以上就是Vue3的watch的介绍，watch是Vue3中非常重要的一个功能，可以帮助我们更好的监听数据变化，并执行相应的操作。在Vue3中，我们可以使用watch来监听数据的变化，从而执行相应的操作。watch有以下几种使用方式：在Vue3中，我们可以使用watch来监听一个变
Vue3中watch用法
linfeng_meng的博客
09-19 1534
侦听器watch作用是侦听一个或多个数据的变化，数据变化时执行的回调函数，两个额外参数：`immediate`（立即执行）和`deep`（深度侦听）
vue的watch和watchEffect详解
weixin_47450807的博客
02-15 1万+
一、前言 在options api中我们采用watch来监听data中的数据或者props中的参数变化。在componsiton api中我们采用watchEffect和watch来进行监听数据变化，并且watchEffect是自动收集依赖，watch则需要我们自己指定需要监听的数据。接下来我们将详细讲解一下composition api中的watchEffect和watch两个api。 二、watchEffect的使用 watchEffect刚开始就会立即执行，并且会自动收集依赖，当其中的依赖项发生改变
Vue3中 watch、watchEffect 详解
郊眠寺
06-21 684
语法 1.1 监听 ref 定义的响应式数据 1.2 监听 reactive 定义的响应式数据 1.3 监听多个响应式数据数据 1.4 监听对象中某个属性的变化 1.5 深度监听（deep)、默认执行（immediate） watchEffect 也是一个帧听器，是一个副作用函数。它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。 停止侦听当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并
Vue3-Watch、Watcheffect、Computed的使用和区别
07-05
Vue3--Watch、Watcheffect、Computed的使用和区别
vue3下watch的使用
热门推荐
weixin_42349568的博客
09-08 6万+
1，基本数据类型：可以直接监听，可获取新旧值。2，引用数据类型：需要deep:true深度监听，但是只能获取新值。要想获取新旧值，要想获取新旧值，需要监听目标数据的深拷贝。
Vue3 - watch 侦听器（保姆级详细使用教程）
weixin_44166849的博客
09-27 3万+
它之所以叫侦听器，是因为它可以侦听一个或多个响应式数据源数据，并再数据源变化时调用所给的回调函数。就是你传给watch侦听器一个响应式变量，然后当这个变量变化时，自动触发一个你定义的函数，就像一个人被监控了一样，只要这个人一动，摄像头就会报警。
vue3 watch的用法
m0_60899441的博客
07-29 3万+
watch的用法
Vue3 Watch详解：新手入门教程
muqin6610的博客
04-19 1182
在Vue3中，watch是一个用于监听数据变化并触发回调函数的功能。当数据发生变化时，watch会自动执行相应的操作，使得我们可以对数据的变化进行更灵活的处理。通过本教程，我们深入了解了Vue3中watch的基本概念和常见用法，以及一些高级用法。通过灵活运用watch，开发者可以更好地响应数据的变化，实现更强大的功能。希望这份Vue3 Watch的新手教程能够帮助您更好地理解和应用watch功能，为您的Vue3开发之旅添上更多的便利。
一文讲清楚vue3中watch的使用
m0_57202548的博客
01-16 1390
watch的第一个参数的传递方式：对于ref的响应式数据对象直接传一个ref包装后的响应式对象即可，新旧值不一样。。使用watch侦听多个数据源的变化，直接将多个ref响应式对象组成的数组传递给watch，新旧值不一样。。无需开启深度侦听，直接传一个ref响应式对象无效，需要传一个getter函数，新旧值不一样。。如果有多层嵌套，需要开启深度侦听，可以直接传一个ref响应式对象或者使用getter函数，新旧值一样。或。直接传一个ref响应式对象无效，需要传一个getter函数，新旧值不一样。。
VUE3 中的 Watch 详解
weixin_42776027的博客
07-13 2万+
一、监听基础类型 二、监听复杂类型 复杂类型的监听有很多种情况，具体的内容如下 其第一个参数是直接传入要监听的对象。当监听整个对象时，只要这个对象有任何修改，那么就会触发 watch 方法。无论是其子属性变更（如 demo.name），还是孙属性变更（如 demo.soulmate.name）...，都是会触发 watch 方法的。2. 监听对象中的某个属性 如上代码，监听 demo 对象的 name 属性，那么只有当 demo 对象的 name 属性发生变更时，才会触发 watch 方法，
vue3中的watch的用法和几种常见情况
weixin_44437816的博客
05-08 1万+
vue3中的watch的用法和几种常见情况
vue3watch和watcheffect使用
最新发布
09-07
在Vue 3中，`watch` 和 `watchEffect` 都是用来监听数据变化并执行某些操作的工具，它们的区别在于： 1. **watch**： - `watch` 是一种基础的响应式监听器，它可以监听一个或多个属性，并在其值发生变化时执行回调...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jerry_ww

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值