VUE3中watch监听使用的不同情况总结

2024-10-03 16:27:16

watch介绍

vue中watch用来监听数据的响应式变化.获取数据变化前后的值

watch的完整入参

watch(监听的数据，副作用函数，配置对象)
watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

watch监听的不同情况

创建响应式数据

import { ref, watch, reactive } from "vue";
let name = ref("moxun");
let age = ref(18);
let person = reactive({
  Hobby: "photo",
  city: {
    jiangsu: {
      nanjing: "雨花台",
    },
  },
});

1 监听单个refimpl数据

watch(name, (newName, oldName) => {
  console.log("newName", newName);
});

2 监听多个refimpl数据

方式一：vue3允许多个watch监听器存在

watch(name, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});
watch(age, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});

方式二：将需要监听的数据添加到数组

watch([name, age], (newValue, oldValue) => {
  // 返回的数据是数组
  console.log("new", newValue, "old", oldValue);
});

3 监听proxy数据

注意

1.此时vue3将强制开启deep深度监听

2.当监听值为proxy对象时，oldValue值将出现异常，此时与newValue相同

// 监听proxy对象
watch(person, (newValue, oldValue) => {
  console.log("newValue", newValue, "oldValue", oldValue);
});

4 监听proxy数据的某个属性

需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化

watch(
  () => person.Hobby,
  (newValue, oldValue) => {
    console.log("newValue",newValue, "oldvalue", oldValue);
  }
);

注意

当监听proxy对象的属性为复杂数据类型时，需要开启deep深度监听

watch(
  () => person.city,
  (newvalue, oldvalue) => {
    console.log("person.city newvalue", newvalue, "oldvalue", oldvalue);
  },{
    deep: true
  }
);

5 监听proxy数据的某些属性

watch([() => person.age, () => person.name], (newValue, oldValue) => {
  // 此时newValue为数组
  console.log("person.age", newValue, oldValue);
});

总结

1.与vue2中的watch配置一致

2.两个坑：

监听reactive定义的proxy代理数据时
oldValue无法正确获取
强制开启deep深度监听（无法关闭）

监听reactive定义的proxy代理对象某个属性时deep配置项生效

到此这篇关于VUE3中watch监听使用的文章就介绍到这了,更多相关VUE3 watch监听使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue3.0中的watch侦听器实例详解

目录前言侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用监听多个响应式数据侦听reactive定义的响应式数据监听reactive定义的响应式数据的某一个属性配置选项用法总结前言虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别计算属性里不可以做异步操作,侦听器可以做异步操作
VUE3中watch和watchEffect的用法详解

watch和watchEffect都是监听器,但在写法和使用上有所区别. watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样.watch在监听 ref 类型时: <script> import {ref, watch} from 'vue' export default { setup() { const state = ref(0) watch(state, (newValue, oldValue) =>
vue3的watch和watchEffect你了解吗

目录 watch 结论1: 结论2 结论3 watchEffect 结论1 结论2watchEffect监听多个数据源结论3watchEffect停止监听总结 watch 结论1: watch需要侦听特定的数据源,可以是一个也可以是多个,在页面第一次加载时不运行函数,只有当监听的数据源改变时,才会运行此函数结论2 watch监听一个对象的属性,首先监听的值要以函数返回值的形式进行传递监听,不同于vue2形式的监听,如下为对象属性5秒后改变,监听函数打印结论3 监听多个数据源,是把需要监听
vue3中的watch和watchEffect实例详解

目录首先总结一下两者的区别: 下面是根据上面的第三点做的一些小实验: 总结闲来无事,比较了一下 vue3 中的 watch 和 watchEffect,总觉得官方文档没咋说清楚,今天就小小实践了一下. 首先总结一下两者的区别: 1.watch 是惰性执行,而 watchEffect 不是,不考虑 watch 的第三个参数配置的情况,watch 在组件第一次执行的时候是不会执行的,只有在之后依赖项变化的时候再执行,而 watchEffect 是在程序执行到此处的时候就立即执行,而后再响应其依赖
Vue2和Vue3如何使用watch侦听器详解

watch:侦听数据变化 (某个值的change事件) vue2.x data(){ return{ num:10 } }, watch:{ num:{ /* * newValue:当前值 * oldValue:修改上一刻的值 */ handler(newValue,oldValue){ // doSomething }, /* * deep:Boolean : 深度监听 * true: 监听堆的改变就 * false:只监听栈的改变(默认) */ deep:true/false, /* * i
Vue3中watch的用法与最佳实践指南

目录前言
VUE3中watch监听使用的不同情况总结

目录 watch介绍 watch监听的不同情况 1 监听单个refimpl数据 2 监听多个refimpl数据 3 监听proxy数据 4 监听proxy数据的某个属性 5 监听proxy数据的某些属性总结 watch介绍 vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参 watch(监听的数据,副作用函数,配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})
Vue3中watch监听使用详解

目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export
Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

目录 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 2. 原因 3.watch源码分析 4.doWatch源码分析 5.总结 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 <script lang="ts" setup> // 接受父组件传递的数据 const props = defineProps({ test: { type: String, default: '' } }) // 使用 watch 侦听 props 中的 test 属性
Vue3.0中如何监听props方法

目录 Vue3.0如何监听props 第一种第二种 vue3.0监听props做数据回显 Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种直接监听这个props export default defineComponent({ props: { isOpen: Boolean, }, emits: { "close-modal": null, }, setup(props, context) { watch(
AngularJS中watch监听用法分析

本文实例讲述了AngularJS中watch监听用法.分享给大家供大家参考,具体如下: ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); watchExpression 需要监控的表达式 listener 处理函数,函数参数如下 function
iOS开发中Swift3 监听UITextView文字改变的方法(三种方法)

在项目中使用文本输入框出UITextField之外还会经常使用 UITextView ,难免会有需求监听UITextView文本框内文本数量.下面介绍在swift3中两种常用方式方式一: 全局通知 1.注册通知在合适位置注册监听UITextView文本变化的全局通知 //UITextView 监听开始输入的两种方法 //方法一:通知 NotificationCenter.default.addObserver(self, selector: #selector(ComposeVC.textV
详解ASP.NET Core中配置监听URLs的五种方式

默认情况下,ASP. NET Core应用会监听一下2个Url: http://localhost:5000 https://localhost:5001 在本篇博文中,我将展示如何使用五种不同的方式改变应用监听的URLs. 在ASP.NET Core项目启动时,有多种配置监听Url的方式,在我之前的一篇博客中,已经展示了在ASP.NET Core 1.0中如何应用不同的方式配置,在ASP.NET Core 3.x中,大部分方式还是一样的. UseUrls() - 在Program.cs配置程序
关于vue中如何监听数组变化

前言前段时间学习了关于vue中响应式数据的原理,(并作了学习笔记vue响应式原理),其实是通过Object.defineProperty控制getter和setter,并利用观察者模式完成的响应式设计.那么数组有一系列的操作方法,这些方法并不会触发数组的getter和setter方法.那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~ 源码部分 https://github.com/vuejs/vue/blob/dev/src/core/observer/array.
Android中ScrollView监听滑动距离案例讲解

需求:想实现像美团中列表下拉后出现悬浮窗的效果. 思路:首先对ScrollView进行滑动监听,然后在onScrollChanged()方法中获取到滑动的Y值,接着进行相关操作即可. 效果一如如下: 实现步骤: 1.自定义MyScrollView (1)重写onScrollChanged()获取Y值. (2)自定义滑动监听接口onScrollListener并公开此接口. public class MyScrollView extends ScrollView { private OnScrol
JavaScript中MutationObServer监听DOM元素详情

一.基本使用可以通过MutationObserver构造函数实例化,参数是一个回调函数. let observer = new MutationObserver(() => console.log("change")); console.log(observer); observer对象原型链如下: MutationObserver实例: 可以看到有disconnect.observer.takeRecords方法. 1. observer方法监听 observer方法用于关联