11.侦听器 watch

已于 2023-06-16 16:58:10 修改
阅读量234 收藏
点赞数
分类专栏： Vue笔记 文章标签： vue.js 前端 javascript
于 2023-03-15 17:49:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/potato123232/article/details/129562285
版权

侦听器是监测数据变化的，当数据变化的时候，我们可以做一些动作

目录

1  基本使用

2  获取当前值与之前的值

3  用户名是否被占用案例

4  侦听器的另一种写法

5  侦听器打开时就执行 immediate

6  深度侦听 deep

7  深度侦听指定变量

1  基本使用

我们给input双向绑定username，然后搞一个watch，watch中使用变量名称作为函数名，当该变量变化的时候，会执行里面的内容

我们在input中输入一个1，发现内容被执行了

2  获取当前值与之前的值

侦听器函数有两个形参，第一个是当前的值，第二个是之前的值

打开页面后我们输入123

3  用户名是否被占用案例

判断应该是与请求的结果进行比较的，我这里就用数组替代了，这个最好是用lazy控制请求次数，每改动一次就请求后端可能撑不住（或者你可以加入防抖，那样写起来就比较麻烦，直接给个lazy比较好写）

输入12时没反应

输入123后失去焦点之后显示用户名已被占用

4  侦听器的另一种写法

  • handler名称固定
  • 就将handler当成普通的函数就行了，前面可以写 async，里面可以写 await

打开后我们输入321

5  侦听器打开时就执行 immediate

默认情况下，侦听器只有在数据变动的时候才会执行，比如我们当前给username一个初始值

我们可以看到admin在被占用的名单中，但是并没有显示右侧的提示

我们如果想让其打开的时候就触发，那么我们需要将侦听器改为对象写法，然后加入immediate属性，如果设置为true就一进入页面就触发，如果为false就只有改变的时候触发

打开之后发现提示显示出来了

6  深度侦听 deep

在我们的数据是多级的时候，默认情况下，改变子级数据不会触发侦听器

加入deep并让deep为true可以在改变子级属性（包括所有子级）时触发侦听器

7  深度侦听指定变量

我们深度侦听拿到的值是一个对象，用的时候可能会麻烦一些

这样就可以了

当你需要侦听的对象有多个属性的时候，如果将deep置为true，那么任何对象中的任何一个属性发生改变都会触发侦听器。如果像上面一样侦听指定的变量，那么改动对象中的其他值就不会触发侦听器

Suyuoa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 2.0 侦听器 watch属性代码详解
10-16
Vue 2.0作为其中一个主要版本，提供了多种响应式数据处理方式，其中之一就是侦听器（watcher）功能。侦听器允许开发者在数据变化时执行相应的操作，这是一种非常有用的特性，尤其在进行异步数据处理、复杂的动态更新...
vue侦听器watch精彩案例分享
08-07
本资源方位地分享了watch 的经典案例。其中，对 watch 监视普通数据类型、对象类型以及数组类型通过丰富的案例进行了深入的分析。此外，还对比了计算属性与 watch 之间存在的差异，并同样借助案例加以剖析。最后，对...
watch 侦听器
无知者无畏
02-24 730
vue官方文档-watch讲解 Vue中计算属性和watch的区别 侦听字符串 和 侦听对象的属性 用法的区别 第 1 章：watch 侦听器 基本用法 侦听字符串 和 侦听对象的属性 用法的区别 <template> <div class="watch"> <input type="text" v-model="name" /> <p>{{ name }}</p> <input type="text" v-mod
watch侦听器
m0_63400611的博客
05-11 74
watch侦听器简介 watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作 语法格式如下: const vm = new Vue({ el: '#app', data: { username: 'zhangsan' }, watch: { //监听 username 值的变化 //newVal 是"变化后的新值" oldVal 是"变化之前的旧值" username(newVal, oldVal) { console.log(newVal, oldV
Vue之侦听器watch
Quincy.Coder的博客
06-09 450
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;侦听器&amp;lt;/title&amp;gt
watch侦听器是什么？watch侦听器使用方法是什么？
zy1992As的博客
11-09 372
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发 起请求，判断用户名是否可用。 watch 侦听器的基本语法 开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下： 使用 watch 检测用户名是否可用 监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用： immediate 选项 默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被
Vue.js中关于侦听器（watch）的高级用法示例
10-18
Vue.js中的侦听器（watch）是一个强大的特性，它允许开发者在数据变化时执行自定义逻辑，特别是处理异步操作或者复杂的数据依赖。在本文中，我们将深入探讨Vue.js中watch的高级用法，以及如何有效地利用它们来优化你...
深入浅析Vue.js计算属性和侦听器
10-18
这时，Vue.js的侦听器（watch）就派上用场了。侦听器允许我们在数据变化时执行自定义逻辑，甚至可以改变其他数据。 ```javascript data: { firstName: 'Foo', lastName: 'Bar' }, watch: { firstName: function...
vue中如何使用watch
qq_41339126的博客
05-25 1408
在vue2中如何使用watch 使用watch监听数据时的三种方法 watch可以监听哪里的数据
vue实现watch创建监听时立即执行
热门推荐
qq_43080360的博客
03-01 1万+
watch是vue中用来监听数据变化的方法属性，通常watch监听的数据发生变化，调用因为变化而执行的方法，通过watch动态改变关联的状态；常用写法👇： watch: function (oldValue,newValue) { console.log(oldValue,newValue); } ...
vue中的监听器
Sun_Maple_jw的博客
09-04 690
1、什么是监听器
Vue.js中侦听器（watch）的高级用法
前端全栈开发者
04-28 1036
假设有如下代码： <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', dat...
vue计算属性computed和侦听器watch的使用场景
大师兄
11-16 3434
原文链接:https://dsx2016.com/?p=679 微信公众号: 大师兄2016 特点和区别 vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步. 这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分. computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的...
侦听器---watch的基本使用
GZZ__z的博客
10-19 1264
一，侦听器基本概念： 可以侦听指定名称的属性值的变化，当属性值变化的时候自动的触发侦听器，进行相应的业务处理 二，简单侦听: (直接侦听常规属性值的变化) 1.函数名称必须和属性名称完全一致 2.不能人为调用 3.没有返回值，如果你想使用处理结果，必须将结果赋值给data中的成员，再进行使用 4.watch是一个单独的选项 语法： watch:{ 属性名称(新值，旧值){ } } 三，深度侦听： 1.deep（深度侦听）：默认情况下，侦听器无法侦听对象的属性值的变化，如.
Vue中侦听器watch的基本使用
zhangxiaojiong_zh的博客
05-10 839
 侦听实际上就是侦听组件中数据属性的变化。一般来说，侦听划分为简单侦听和深度侦听。对基本数据类型的侦听我们只需要使用简单侦听即可，而对复杂数据类型诸如对象数组的侦听，我们需要使用深度侦听。侦听时我们使用watch作为组件定义时的一个option。  1.基本数据类型之简单侦听基本用法 watch:{ msg:function(newV,oldV) { // 相关操作 } }  2.复杂数据类型之深度侦听用法基本用法 watch:{ arr:{
avue-crud 自定义搜索项 插槽
qq_31683775的博客
08-20 330
加上 -search 就可以自定义查询项了。
Vue Styled Components 新版本发布
最新发布
As的博客
08-22 418
Feature ### 自动添加前缀(Auto Prefixing) vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 293
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
vue2侦听器watch的用法
09-27
Vue2的侦听器watch用于监听一个数据的变化，并在数据变化时执行相应的处理函数。 在Vue2中，可以通过以下两种方式定义侦听器watch： 1. 简单案例（监听一个）： ```javascript watch: { something(newVal, oldVal...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Suyuoa

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

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

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

打赏作者

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

抵扣说明：

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

余额充值