vue3的Watch使用详解

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量296 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48567214/article/details/134418890
版权

vue官网提到： watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

1.监听单个Ref

在这里插入图片描述
在这里插入图片描述

2.监听一个getter函数

在这里插入图片描述在这里插入图片描述
当然只修x或者y其中一个的值，也会触发监听

3.多个来源组成的数组

在这里插入图片描述在这里插入图片描述

4.监听reactive对象

在这里插入图片描述

5.监听reactive对象中的属性

在这里插入图片描述
错误写法报错在这里插入图片描述

正确返回在这里插入图片描述

且修改y的值不会触发对x属性的监听

冬天不会冷ll
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3中watch（监听）的五种情况
weixin_59233142的博客
01-11 9741
第三个参数是一个配置对象： 可选值： 1. immediate：在监听创建时立即触发回调，第一次调用时旧值是undefined 2. deep：如果值是对象，强制使用深度遍历，一遍在深层级变更时触发回调 3. flush：调整回调函数的刷新时机 默认情况下，监听的回调（第二个参数）都会在 Vue 组件更新之前被调用。这意味着你在监听回调中访问的 DOM 将是被 Vue 更新之前的状态。 如果想在监听回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post'
vue3中的watch的用法和几种常见情况
weixin_44437816的博客
05-08 1万+
vue3中的watch的用法和几种常见情况
VUE3 中的 Watch 详解
热门推荐
weixin_42776027的博客
07-13 2万+
一、监听基础类型 二、监听复杂类型 复杂类型的监听有很多种情况，具体的内容如下 其第一个参数是直接传入要监听的对象。当监听整个对象时，只要这个对象有任何修改，那么就会触发 watch 方法。无论是其子属性变更（如 demo.name），还是孙属性变更（如 demo.soulmate.name）...，都是会触发 watch 方法的。2. 监听对象中的某个属性 如上代码，监听 demo 对象的 name 属性，那么只有当 demo 对象的 name 属性发生变更时，才会触发 watch 方法，
Vue3 指南：掌握 watch 函数的正确使用方法
andy_68147772的博客
12-07 458
在 Vue 3 中，watch函数是一个用于侦听响应式数据变化的 API。当你需要在数据变化时执行副作用时，可以使用watch。以下是如何在 Vue 3 中使用watch。
vue3中的watch
m0_47999208的博客
09-28 1013
在Vue3中，watch中的参数可以分为两部分，即要监听的响应式数据以及回调函数。
vue3-watch侦听器
YogaMiller的博客
04-05 150
默认没开启深度watch, 监听整个reactive, 开启deep}) 这样默认深度监视 watch(() => obj ,(v) => {}) 需要手动开启deep watch(() => obj . name ,(v) => {}) 监听某个属性 watch(() =>({}) 监视多个属性(但只监视第一层 ...)
Vue3中的watch和watchEffect（知识脉络）
DM_Cxx的博客
06-23 5567
最近面试，问到`watch`和`watchEffect`的区别，在学习Vue3的路上知道了解过，但是自己的项目用的少或是没有运用到，对`watch`和`watchEffect`感受不够深刻，答不上来（真是菜！），写篇文章研究探讨一下。
vue3中的watch函数和watchEffect
m0_45219210的博客
11-03 1443
Watch在Vue2中是一个配置项，在Vue3中是一个函数，可以写多个。在Vue3中，watch可以接收三个参数，第一个是
vue3中watch的使用场景
qq_52179917的博客
08-02 209
监听对象包裹在数组中，不加deep可以触发并获取到新值，普通数据类型可以获取到新旧值（数组里面可以写多个监听对象）监听的是一个函数（返回对象），不加deep的时候不会触发侦听器，加deep后也只能获取到新值。监听的是函数（返回的是对象中的属性），不加deep可以触发并获取到新旧值。...
详解Vue中watch的详细用法
10-17
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
详解Vue中watch的高级用法
12-03
假设有如下代码： ...new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName
详解Vue中watch对象内属性的方法
10-17
主要介绍了详解Vue中watch对象内属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3源码之watch相关
玉案轩窗的博客
07-20 603
前言 Vue3版本中关于定义watch相关的有4处，具体有watch、watchEffect、$watch、watch选项。实际上$watch和watch选项这两种方式与Vue2中并没有什么不同，实际上也是为了兼容Vue2.x版本的处理。本文主要关注于watch和watchEffect这两个函数式API，旨在了解相关处理逻辑以及加深对Vue3中副作用effect的细节理解。 watch watch API本身是一个函数，实现对指定数据源的侦听，其源码如下： function watch(source, cb
Vue3----watch函数
weixin_52053631的博客
06-29 3564
侦听一个或多个响应式数据的变化，数据变化时执行回调函数两个额外参数：1. immediate（立即执行） 2.deep（深度监听）：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调默认机制：通过watch监听的ref对象默认是浅层监听的，，需要开启deep选项1.导入watch函数2. 执行watch函数传入要侦听的响应式数据（ref对象）和回调函数。
vue3 watch监听 第一个参数是引用类型时，为什么要使用函数
随风的博客
05-08 462
因此监听对象里的一个属性可能不符合以上4种情况，比如你题目中的state.count是一个数值。watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。第一个参数：侦听源，侦听源可以是一下几种。一个响应式对象（reactive）或是由以上类型的值组成的数组。一个函数，返回一个值。
vue3中watch的用法及讲解
qq_70703397的博客
05-08 2728
当我们在Vue 3应用程序中想要监听数据的变化时，可以使用watch函数。watch函数支持多种用法，包括监听响应式对象、计算属性、ref 对象等等。下面我们就来详细讲解一下watch函数的用法。
vue3中 watch的使用
Smile的博客
04-13 250
watch方法内注意第一个参数！！！ 监听单个数据源 let count = ref(1); watch(count, (newValue, oldValue) => { //直接监听 console.log("count改变了"); }); 监听对象 setup(props) { console.log(props.dialogData); } watch( () => props.dialogData, () => { //通过一个函数返回要监听的
vue3 初识
w_____w_____的博客
08-16 128
setup() 使用 setup 函数时，它将接收两个参数： props 无法解构2. context ref，toRefs/toRef toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据 toRefs const state = reactive({ foo: 1, bar: 2 }) const stateAsRefs = toRefs(state) /* Type of stateAsR
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 1203
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
vue3 watch 详解
09-01
在Vue3中，`watch`可以通过以下几种方式使用： 1. **基础用法**：可以使用`watch`方法来监视一个响应式数据的变化，并在变化发生时执行回调函数。示例如下： ```javascript import { watch } from 'vue'; watch(...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值