vue3.0(八) 监听器（watch），高级监听器（watchEffect）

于 2024-05-13 18:00:50 发布
阅读量1.1k 收藏 21
点赞数 34
分类专栏： vue3.0 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengcheng9876/article/details/138807658
版权

文章目录

watch

watch特性进行了一些改变和优化。与computed不同，watch通常用于监听数据的变化，并执行一些副作用，侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

1 watch的用法

  1. watch的基本用法
    watch(source, callback, options?)

    source表示要监听的数据，可以是一个响应式的数据对象、一个计算属性或一个方法的返回值；callback表示当数据发生变化时要执行的回调函数；options表示watch的一些配置选项，例如immediate、deep、flush等。

  2. 监听 ref 定义的响应式数据
    <template>
  <div>
    <div>值：{{count}}</div>
    <button @click="add">改变值</button>
  </div>
</template>
 
<script>
import { ref, watch } from 'vue'
export default {
  setup () {
    const count = ref(0)
    const add = () => {
      count.value++
    }
    watch(count, (newVal, oldVal) => {
      console.log('值改变了', newVal, oldVal)
    })
    return {
      count,
      add
    }
  }
}
</script>
    上述代码执行效果
  3. 监听 reactive 定义的响应式数据
    <template>
  <div>
    <div>姓名：{{ obj.name }}</div>
    <div>年龄：{{ obj.age }}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>
 
<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    const obj = reactive({
      name: 'zs',
      age: 14
    })
    const changeName = () => {
      obj.name = 'ls'
    }
    watch(obj, (newVal, oldVal) => {
      console.log('值改变了', newVal, oldVal)
    })
    return {
      obj,
      changeName
    }
  }
}
</script>

上述代码执行结果
注：此处监听的新值和旧值相同，主要是因为新旧值引用地址是相同的，
此处可采取computed计算属性先实现深拷贝。

	<template>
	  <div>
	    <div>姓名：{{ obj.name }}</div>
	    <div>年龄：{{ obj.age }}</div>
	    <button @click="changeName">改变值</button>
	  </div>
	</template>
	 
	<script>
	import { reactive, watch, computed } from 'vue'
	export default {
	  setup () {
	    const obj = reactive({
	      name: 'zs',
	      age: 14
	    })
	    const changeName = () => {
	      obj.name = 'ls'
	    }
	    const deepObj = computed(() => {
	      return JSON.parse(JSON.stringify(obj))
	    })
	    watch(deepObj, (newVal, oldVal) => {
	      console.log('值改变了', newVal, oldVal)
	    })
	  
	    return {
	      obj,
	      changeName
	    }
	  }
	}
	</script>
  1. 监听多个ref的值，采用数组形式
    <template>
  <div>
    <!-- 侦听多个变量 -->
    姓名：<input v-model="userName" type="text">
    年龄：<input v-model="age" type="number">
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  setup () {
    const userName = ref<string>('张三')
    const age = ref<number>(18)
    watch([userName, age], (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    return {
      userName,
      age
    }
  }
})
</script>

在这里插入图片描述

  1. 监听reactive对象中某个属性的变化
    <template>
  <div>
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>
 
<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    const obj = reactive({
      name: 'zs',
      age: 14
    })
    const changeName = () => {
      obj.age++
    }
    watch(() => obj.age, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    return {
      obj,
      changeName
    }
  }
}
</script>

在这里插入图片描述

2 watch的高级用法

  1. 一次性监听
    每当被侦听源发生变化时，侦听器的回调就会执行。如果希望回调只在源变化时触发一次，请使用 once: true 选项。
    <template>
 <div>
    <div>{{obj.name}}</div>
    <div>{{obj.classInfo.studentNum}}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>
 
<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    const obj = reactive({
      name: 'zs',
      age: 14,
      classInfo: {
        className: '一年级',
        studentNum: 45
      }
    })
    const changeName = () => {
      obj.classInfo.studentNum++
    }
    watch(() => obj, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    }, {
      once: true
    })
    return {
      obj,
      changeName
    }
  }
}
</script>
  2. 深层侦听器
    直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：deep 选项，强制转成深层侦听器：
    <template>
  <div>
    <div>{{obj.name}}</div>
    <div>{{obj.classInfo.studentNum}}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>
 
<script>
import { reactive, watch } from 'vue'
export default {
  setup () {
    const obj = reactive({
      name: 'zs',
      age: 14,
      classInfo: {
        className: '一年级',
        studentNum: 45
      }
    })
    const changeName = () => {
      obj.classInfo.studentNum++
    }
    watch(() => obj, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    }, {
      deep: true // 不添加deep属性，watch不会触发
    })
    return {
      obj,
      changeName
    }
  }
}
</script>

    注意：当我们使用deep选项时，watch的性能会受到一定的影响，因为Vue需要对对象或数组进行递归遍历。因此，只有在必要的情况下才应该使用deep选项

  3. 即时回调的侦听器
    watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。通过传入 immediate: true 选项来强制侦听器的回调立即执行：
    import { reactive, watch } from 'vue'
const state = reactive({
  count: 2
})
watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
  },
  { immediate: true }
)
  4. flush 回调的触发时机
  • sync：同步模式下执行
  • pre：在数据变化之前执行回调函数
  • post：在数据变化之后执行回调函数，但是需要等待所有依赖项都更新后才执行
    import { reactive, watch } from 'vue'
const state = reactive({
  count: 2
})
watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
  },
  { flush: sync }
)

3 watch性能优化

  1. 使用computed代替watch
    import { reactive, computed } from 'vue'
const state = reactive({
  count: 2
})

const doubleCount = computed(() => {
  return state.count * 2
})
console.log(doubleCount.value) // 输出：2
state.count++
console.log(doubleCount.value) // 输出：4
  2. 使用throttle和debounce控制回调函数的执行频率
    频繁地监听一个值的变化，并在变化时执行一些操作。如果回调函数执行的太频繁，会影响性能。为了避免这种情况，我们可以使用throttle和debounce控制回调函数的执行频率
    throttle可以用于控制函数在一定时间内只能执行一次，
    debounce可以用于控制函数在一定时间内不会连续执行
    import { reactive, watch } from 'vue'
import { throttle } from 'lodash-es'
const state = reactive({
  count: 3
})
watch(
  () => state.count,
  throttle((newVal, oldVal) => {
    console.log(newVal， oldVal)
  }, 1000)
)
state.count++

watchEffect

watchEffect 函数来创建高级侦听器。与 watch 和 computed 不同，
watchEffect 不需要指定依赖项，自动追踪响应式状态的变化，并在变化时重新运行

<template>
  <div>
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="changeAge">改变值</button>
  </div>
</template>
<script>
import { reactive, watch, watchEffect } from 'vue'
export default {
  setup () {
    const obj = reactive({
      name: 'zs',
      age: 14,
    })
    const changeName = () => {
      obj.age++
    }
    watchEffect(() => {
      console.log(obj.age)
    })
    return {
      obj,
      changeAge
    }
  }
}
</script>

1 停止监听

watchEffect 函数不会返回一个停止侦听的函数。如果我们需要停止侦听，我们可以将 watchEffect 的返回值设为 null

const stop = watchEffect(() => {})

// 当不再需要此侦听器时:
stop()

2 侦听多个状态

如果需要侦听多个响应式状态，可以在 watchEffect 函数中使用这些状态，并在函数中返回一个计算值，

<script>
import { reactive, watchEffect } from 'vue'
export default {
  setup () {
    const state = reactive({
      count1: 2,
      count2: 3
    })
    watchEffect(() => {
      const sum = state.count1 + state.count2
      console.log(sum)
    })
    // 改变状态，输出  5
    state.count1++

    // 改变状态，输出 8
    state.count2 += 2
    return {
    }
  }
}
</script>

3 懒执行

watchEffect 函数也支持懒执行（lazy evaluation）。如果我们将 watchEffect 的第二个参数设置为 { lazy: true }，则这个函数会在第一次访问响应式状态时才会被运行

const state = reactive({
   count: 2
 })
 watchEffect(() => {
   console.log(state.count)
 }, { lazy: true })
 // 改变状态，输出  2 3
 state.count++

watch和watchEffect的区别

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：
watch 监听函数可以添加配置项，也可以配置为空，配置项为空的情况下，
watch的特点为：

  • 有惰性：运行的时候，不会立即执行；
  • 更加具体：需要添加监听的属性；
  • 可访问属性之前的值：回调函数内会返回最新值和修改之前的值；
  • 可配置：配置项可补充 watch 特点上的不足：
  • immediate：配置 watch 属性是否立即执行，值为 true 时，一旦运行就会立即执行，值为 false时，保持惰性。
  • deep：配置 watch 是否深度监听，值为 true 时，可以监听对象所有属性，值为 false 时保持更加具体特性，必须指定到具体的属性上。
    watchEffect 特点
  • 非惰性：一旦运行就会立即执行；
  • 更加抽象：使用时不需要具体指定监听的谁，回调函数内直接使用就可以；
  • 不可访问之前的值：只能访问当前最新的值，访问不到修改之前的值；

watch和computed的区别

computed（计算属性）：

  1. 定义：computed是一个基于其依赖的数据进行计算的值，可以缓存计算的结果。
  2. 工作原理：Vue会自动追踪computed属性方法对data的数据依赖，并在依赖数据发生变化时重新计算computed属性的值。
    computed特点：
    • 支持缓存，只有依赖数据发生改变时才会重新进行计算。
    • 不支持异步操作，如果computed内有异步操作，则无效。
    • 必须通过return返回一个值。
    • 适合当一个属性受多个属性影响时使用。
    • 在模板中可以直接使用，访问时不需要加括号。
      watch（监听）：
  3. 定义：watch用于监听响应式数据的变化，并在数据发生变化时执行一些自定义的操作。
  4. 工作原理：当监听的数据发生变化时，会直接触发相应的操作。
    watch特点：
    • 不支持缓存功能，监听的数据发生变化时会直接触发相应的操作。
    • 支持异步操作，适合监听路由和设置计时器等。
    • 可以没有返回值。
    • 适合当一条数据影响多条数据时使用。
    • 在模板中不能直接使用，需要通过事件或方法进行调用。
程楠楠&M
关注
  • 34
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue计算属性computed、事件、监听器watch的使用讲解
01-21
一.计算属性（computed） 计算属性 <!-- 直接渲染得到数据 -->...input type=text v-model=message>... 这样有一个不好的地方就是后期对页面数据的维护不是那么方便 -->... <p>{{computedMessa
Vue.js中关于侦听器（watch）的高级用法示例
12-29
Vue侦听器watch 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时...
Vue3.0 —— watch函数
slient033的博客
07-02 601
vue-watch函数
vue3.0-watch侦听器
qq_52822043的博客
04-22 1388
目录 1. watch侦听器 1）watch侦听器 2）watch侦听器的基本语法 3）immediate选项 4）deep选项 5）监听对象单个属性的变化 6）计算属性vs侦听器 2. 组件的生命周期 1）组件运行的过程 2）如何监听组件的不同时刻 3）如何监听组件的更新 4）组件中主要的生命周期函数 5）组件中全部的生命周期函数 3. 组件之间的数据共享 1）组件之间的关系 2）父子组件之间的数据共享 ①父->子共享数据 ②子->父共享数据 ③父&...
vue3.0之-watch全面解析
anydo_wang
02-25 1162
1、监听ref()创建的响应数据 2、监听
vue3中watch侦听器的使用
黄钢的博客
03-07 1031
侦听器（watch）是vue的核心语法之一，用于监听数据的变化情况。在写项目时经常会遇到，但经常忘记，重新学习了一下尚硅谷的vue3视频，记录一下最新的用法情况。
Vue 2.0 侦听器 watch属性代码详解
12-12
官网介绍的很好理解了，也就是监听一个数据的变化，当该数据变化时执行我们的watch方法,watch选项是一个对象，键为需要观察的表达式(函数),还可以是一个对象，可以包含如下几个属性:  handler ;对应的函数 ;可以...
【JavaScript源代码】VUE watch监听器的基本使用方法详解.docx
12-29
VUE watch监听器的基本使用方法详解 　目录　1、下面代码是watch的一种简单的用法2、immediate 立即监听3、handler方法 4、 deep属性总结　1、下面代码是watch的一种简单的用法　2、immediate 立即监听　3、handler...
【Vue3.0】数据监听(watch)
票票的博客
06-27 1202
vue3.0数据监听
Vue.js 3.0 学习笔记（五）精通监听器
qq_44648936的博客
03-11 429
一、使用监听器 监听器在Vue实例的watch选项中定义 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用监听器</title> </head> <body> <div id="app"> 时：<input type="text" v-model="time"> 分钟：<inp
Spring监听器用法与原理详解(带ApplicationListener模型图)
战斧的博客
05-25 1万+
相信大家都或多或少知道Spring中的监听器，有些人还能说出它采用了观察者模式，但其实它还用到了适配器模式工厂模式等。当然，仍有不少人是完全不了解Spring的监听及其机制的，本次我们就来深入学习一下Spring监听器观察者模式（Observer Pattern）是一种行为设计模式，它用于在对象之间建立一对多的依赖关系。在该模式中，当一个对象的状态发生变化时，它会自动通知其依赖对象（称为观察者），使它们能够自动更新主题对象维护一个观察者列表，并提供方法用于添加和删除观察者。当主题的状态发生变化时，它会。
【vue 3 之 `watch()` & `$watch()` 侦听器的使用与讲解】各侦听源&各配置参数案例讲解
从今年开始写写博客~~
01-10 1845
watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。 watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。 缓冲回调：缓冲回调不仅可以提高性能，还有助于保证数据的一致性。在执行数据更新的代码完成之前，侦听器不会被触发。简单来说，同步修改数据时，修完操作执行完毕后才会触发回调。注意是同步！所以异步操作的时候，要注意多次触发watch的问题。（所有同步操作为1次，异步操作有几次就触发
Vue进阶（八十九）：watch 用法详解
IT全栈 华强工作室
01-04 3709
在Vue中，用watch来响应数据的变化，示例代码如下， 第一种方式 <input type="text" v-model="userName"/> //监听当userName值发生变化时触发 watch: { userName (newName, oldName) { console.log(newName) } } 第一种方式有一个缺点： 就是当值第一次绑定的时候 不...
Vue3的watch监听的多种情况
m0_57482322的博客
02-26 5976
1.vue3中的watch为函数形式，直接在setup里面使用，有三个参数： 第一个是监听的对象 第二个是监听的回调，由于setup不需要考虑this的指向问题，所以可以直接在watch中写箭头 函数 第三个是监听的配置项；如果有两个数据需要监听可以直接写成两个watch函数 2.使用： 1.先引入watch import { watch} from 'vue' 2.在setup()里面引用 watch(props,(newProps,oldProps) => {
面试题，手动取消监听
最新发布
xhc6666的博客
03-07 457
手动清除watch监听
【Vue3中watch属性详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
04-25 2万+
当被监视的属性变化时，回调函数自动调用，进行相关操作，所谓监视属性，就是监测指定的属性是否发生变化，如果发生了，则进行一系列操作，如果没发生变化，则监视属性也不会被触发。
监听器总结
qq_52470307的博客
06-06 857
监听器主要是为了获取在网站运行的过程中产生的数据
vue销毁watch监听器
10-10
在Vue中，要销毁一个watch监听器，可以使用`vm.$watch`方法创建的监听器返回的函数来解除监听。具体步骤如下： 1. 在Vue组件的`created`钩子函数中使用`vm.$watch`方法创建一个监听器，并将其赋值给一个变量。 ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值