watch 侦听器

已于 2022-06-24 23:16:36 修改
阅读量387 收藏 1
点赞数
分类专栏： vue 文章标签： 前端 vue.js
于 2022-06-24 23:11:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47124112/article/details/125453550
版权

watch 侦听器

watch 侦听器允许开发者监视数据的变化，针对数据变化做特定的操作

在这里插入图片描述

案例：监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cG71DqEX-1656082802929)(image-20220602191105971.png)]

侦听器的格式

  1. 方法格式的侦听器

    • 缺点1：无法在刚进入页面的时候，自动触发！！！
    • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！

  2. 对象格式的侦听器

    1. 好处1：可以通过 immediate 选项，让侦听器自动触发！！！

在这里插入图片描述

// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数

  1. 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

在这里插入图片描述

​ 如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

在这里插入图片描述
参考资料

码客前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
侦听器watch及其和计算属性、methods方法的总结
qq_53841687的博客
07-30 701
!计算属性方法侦听器watch年龄age{{age}}el"#app","zhang","san",age18,}},{console.log("调用了fullName2,使用了一次方法")}},{console.log("调用了fullName,计算了一次属性")}},watch{初始化缓存功能https。
vue中的监听器
Sun_Maple_jw的博客
09-04 680
1、什么是监听器
Vue3 - watch 侦听器（保姆级详细使用教程）
weixin_44166849的博客
09-27 1万+
它之所以叫侦听器，是因为它可以侦听一个或多个响应式数据源数据，并再数据源变化时调用所给的回调函数。就是你传给watch侦听器一个响应式变量，然后当这个变量变化时，自动触发一个你定义的函数，就像一个人被监控了一样，只要这个人一动，摄像头就会报警。
vue基础知识：watch 侦听器（监视器）详解，watch监听器的作用，1.watch的简单写法：简单类型数据，直接监视，2.完整写法→添加格外的配置项
最新发布
我就知道你会来，我们一起进步吧！
03-25 4568
watch监听器的作用：监视数据变化，执行一些业务逻辑和异步操作（数据一旦发生变化实时发送请求更新数据）2.immediate：true 初始化立刻执行一次handler方法。1.deep：true对复杂类型深度监视（监视对象中的所有属性）
watch侦听器是什么？watch侦听器使用方法是什么？
zy1992As的博客
11-09 360
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发 起请求，判断用户名是否可用。 watch 侦听器的基本语法 开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下： 使用 watch 检测用户名是否可用 监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用： immediate 选项 默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被
Vue3 watch监听器
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-03 587
watch在vue3中监听响应式数据，默认会开启深度监听，但是当reactive创建的响应式数据时监听其中的某个属性，需要手动开启深度监听{deep:true}。watch监听器在vue3中可以监听的响应式数据包括：ref、getter、reactive；并且一个页面组件可以存在多个监听器。
Vue2-02 computed计算属性、watch侦听器
01-18
Vue2-02 computed计算属性、watch侦听器
【JavaScript源代码】Vue2和Vue3如何使用watch侦听器详解.docx
12-29
Vue2和Vue3如何使用watch侦听器详解 　watch:侦听数据变化 （某个值的change事件）　vue2.x　data（）{　return{　num:10　}　}，　watch:{　num:{　/*　* newValue:当前值　* oldValue:修改上一刻的值　*/　...
Vue 2.0 侦听器 watch属性代码详解
10-16
主要介绍了Vue 2.0 侦听器 watch属性代码详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue.js中关于侦听器（watch）的高级用法示例
10-18
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。下面这篇文章主要给大家介绍了关于Vue.js中关于侦听器（watch）的高级用法的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
Vue学习笔记之计算属性与侦听器用法
10-15
在示例中，`watch`对象定义了一个名为`listen`的侦听器，当`listen`的值发生变化时，会执行对应的函数，打印出“input内容发生改变”。 ```javascript watch: { listen: function() { console.log("input内容发生...
侦听器---watch
qq_45802159的博客
01-03 188
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Vue-watch 侦听器
qq_40792800的博客
11-01 591
定义 在官方文档里面是这么定义的 就是说当属性变化的时候，我们能通过 watch 来监听到属性的变化，从而来执行异步操作或者是耗费性能的操作 常见使用 1、首先，侦听器也是一个配置对象，可以监听多个属性的改变。 2、键就是需要监听的属性，值也同时是一个对象，既可以是data中的属性，也可以是计算属性。 3、对象内部存在几个常用的属性和方法( handler () {} 、deep、immediate) 4、handler () {} ：就是监听函数，能接收两个参数，一个是 newV...
【Vue】watch监听器案例，watch监听器实战、用法，watch监听购物车小案例。watch、filters、computed
qq_51055690的博客
07-10 1959
首先讲一下应用场景，购物车，，购物车的总数需要重新计算，并且购物车的总价，也是需要重新计算的，这里不考虑勾选之类的问题。只对watch做一个简单的应用实战 这里有3个商品，现在对任意一个进行添加或者删除，总价格和总数量都需要发生变化。 这里的变量是定义在data数据中的 再写一下css 开✍ watch监听 最后添加和删除写好了，就是对页面中的totalNum和totalPrice进行实时监听数据了。 看到没有，watch监听 首先写监听的数据名，我定义的数组就叫list，我就写list.........
11.侦听器 watch
potato123232的博客
03-15 227
侦听器是监测数据变化的，当数据变化的时候，我们可以做一些动作。
vue计算属性computed和侦听器watch的使用场景
大师兄
11-16 3400
原文链接:https://dsx2016.com/?p=679 微信公众号: 大师兄2016 特点和区别 vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步. 这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分. computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的...
vue3---watch侦听器总结太到位了！
qq_61950936的博客
08-17 1518
vue3---watch侦听器总结太到位了！watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。✨个人笔记博客✨星月前端博客✨原创不易，还希望各位大佬支持一下✏️评论，你的意见是我进步的财富！......
Vue之侦听器watch
Quincy.Coder的博客
06-09 438
&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
vue中的watch监听（watch 使用方法， 属性解释）
热门推荐
HelloMy_sun的博客
05-19 3万+
1. watch使用的几种方法 通过watch监听data数据的变化，数据发生变化时，就会打印当前的值 watch: { data(val, newval) { console.log(val) console.log(newval) } } 通过watch监听docData数据的变化，数据发生变化时，this.change_number++（使用深度监听） watch: { docData: { han...
vue watch侦听器
04-02
Vue中的watch侦听器是一种在数据发生变化时执行一些操作的功能。它可以用来监听Vue实例中的数据变化，从而执行一些逻辑，比如更新DOM、发送请求等等。 watch的使用方式有两种： 1. 监听一个具体的数据属性 ```javascript watch: { 'name': function (newVal, oldVal) { console.log(`name属性的值从${oldVal}变为${newVal}`); } } ``` 2. 监听一个函数，返回需要侦听的数据属性 ```javascript watch: { fullName: { handler(newVal, oldVal) { console.log(`fullName属性的值从${oldVal}变为${newVal}`); }, // 返回需要侦听的数据属性 deep: true } } ``` 在上面的例子中，我们使用了`deep: true`属性，它表示监听对象内部的属性变化，如果不加这个属性，只有对象本身发生变化才会触发watch。 另外，watch也可以监听数组内部的变化，包括push、pop、shift、unshift、splice、sort、reverse等方法。 ```javascript watch: { list: { handler(newVal, oldVal) { console.log(`list属性的值从${oldVal}变为${newVal}`); }, // 监听数组内部的变化 deep: true } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值