Vue - watch 三种不同写法及场景用法（immediate、handler / deep）

最新推荐文章于 2024-07-27 10:22:27 发布
最新推荐文章于 2024-07-27 10:22:27 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： + Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/122404268
版权
+ Vue 专栏收录该内容
226 篇文章 1295 订阅 ¥9.90 ¥99.00
订阅专栏
本文介绍了Vue中watch的三种不同用法：常规监听、immediate与handler组合以及深度监听。重点讲解了immediate属性如何控制监听函数在初始绑定时是否执行，以及deep属性如何实现对象的深度监听。同时提醒开发者注意深度监听可能带来的性能问题。
摘要由CSDN通过智能技术生成

前言

官方文档（侦听器）：https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8

通过使用 watch 来监听或响应数据的变化，大致用法有如下几种，

每种写法没有好坏之分，只是使用场景不同而已。

一、常规监听

注意：这种监听方式，当值首次绑定的时候，不会执行监听函数。
—— 例如，父组件向子组件 动态传值（props） 时，子组件 props 首次获得传值后，不会触发监听。

很常见的写法，后续每当变量（对象同理）值发生变化时触发，如下代码所示：

// data
data
了解本专栏 订阅专栏 解锁全文
王佳斌
关注
专栏目录
订阅专栏
Vue3 - watch 侦听器（超详细使用教程）
王佳斌
11-16 3009
Vue3官方文档，vue3.js watch 侦听器官方教程文档，vue3---watch侦听器总结太到位了，vue3 watch侦听器，详解Vue3中侦听器watch的使用教程，VUE3中watch监听使用实例详解，vue3---watch侦听器总结太到位了，Vue3侦听器watch，详解Vue3中侦听器watch的使用教程，Vue3 我对watch侦听器的理解，VUE3 中的 Watch 详解，Vue 3 响应式侦听与计算属性，Vue3 watch 和 watchEffect 侦听器，vue3.0中的w
VUE2.0 学习（五）一篇文章读懂监听属性watch，他的两种写法，以及深度监视和简写方式
一天不写代码难受的博客
10-12 656
目录监听属性前提使用监视属性的代码（第一种方法监视）handlerimmediatedeep第二种方法监视监视的范围总结监听多级结构中某个属性的变化监视属性的简写方式计算属性和 监听属性的区别总结为什么vue项目里面的定时器，一般写成箭头函数，其他的写成普通函数 监听属性 前提 我们根据前面学过的知识，今天点击一个按钮，页面上面的数据进行变化，直接给按钮一个点击事件，写法是 <!DOCTYPE html> <html lang="en"> <head> <
VUE Watch
w_t_y_y的博客
07-14 1015
一、watch用法： 1、基础写法 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou'
Vue watch多种使用场景和详细使用案例
最新发布
07-27 442
Vue的watch属性提供了一种观察和响应Vue实例上数据变化的能力。
vue基础知识：watch 侦听器（监视器）详解，watch监听器的作用，1.watch的简单写法：简单类型数据，直接监视，2.完整写法→添加格外的配置项
我就知道你会来，我们一起进步吧！
03-25 5840
watch监听器的作用：监视数据变化，执行一些业务逻辑和异步操作（数据一旦发生变化实时发送请求更新数据）2.immediate：true 初始化立刻执行一次handler方法。1.deep：true对复杂类型深度监视（监视对象中的所有属性）
vue快速入门（二十三）侦听器的简单写法与完整写法
不起眼小菜菜的博客
04-14 453
注释很详细，直接上代码……
vue3中watch的使用场景
qq_52179917的博客
08-02 225
监听对象包裹在数组中，不加deep可以触发并获取到新值，普通数据类型可以获取到新旧值（数组里面可以写多个监听对象）监听的是一个函数（返回对象），不加deep的时候不会触发侦听器，加deep后也只能获取到新值。监听的是函数（返回的是对象中的属性），不加deep可以触发并获取到新旧值。...
vue中关于watch的immediate的理解与使用
vvv3171071的博客
11-28 1141
对于watch的使用大家都还是比较熟悉的，我们平时使用的比较多的就是watch一个变量，偶尔还是使用deep：true来监听对象，但是immediate的使用就相对比较少，之前有遇到过这个属性，而且也查找过资料，但是一直都是有点懵懵的，要深刻去理解他，我们还是主要是从它的作用，需要在那种情境下使用它。
vue1.0和vue2.0的watch监听事件写法详解
10-18
其基本用法是在Vue实例的选项中定义一个watch对象，该对象的属性名是需要监听的数据，属性值是一个对象，该对象包含一个handler函数和可选的其他选项，例如immediate和deep。 在Vue1.0中，watch的写法通常直接在...
vue-watch监听功能（侦听器）详解&使用
热门推荐
weixin_41993525的博客
11-04 9万+
Vue内watch侦听器详解 watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。 vue官方文档解释当需要在数据变化时执行异步或开销较大的操作时，这个方式最有用。 <template> <div></div> </template> <script> export default { data(){ variable:null, }, watch:{ //
详解Vue中watch的详细用法
10-17
`watch`的另一种写法是直接指定一个字符串，这个字符串是将要调用的方法名： ```javascript watch: { cityName: 'nameChange' } ``` 但这种方式下，`watch`不会在初始数据绑定时执行，只有在值发生变化时才会调用...
【Vue】watch的详细⽤法
票票的博客
06-06 981
vue的watch监听事件，监听初始值，对象
vue中watch的详细用法
weixin_49203377的博客
10-22 510
在vue中，使用watch来响应数据的变化，用法一般是同简单的用法 <input type="text" v-model="personName"/> new Vue({ el: '#root', data: { personName: '小明' }, watch: { peosonName(newName, oldName) { // ...(触发相应的操作或者执行相应的函数) } } }) immediate和handler 这样直
Vue基础精讲 —— Vue中computed和watch使用场景和方法
qq_32614411的博客
08-16 4128
watch和computed都是以Vue的依赖追踪机制为基础，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 methods用来定义函数，它需要手动调用才能执行，需要像”fuc()”这样去调用它（假设函数为fuc） computed是计算属性，事实上和data对象里的数据属性是...
vue中watch的handler，deep，immediate用法详解
qq_42975998的博客
02-28 2万+
我们使用watch监听数据时，有三个选项，handler，deep，immediate handler 我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handler（可参考我上篇文章的watch） watch: { // 通过输入框文字的变化，来改变下面的数据 ipt: { handler(newVal,oldVal) ...
watch什么时候用methods，什么时候用handler
weixin_40945354的博客
09-14 249
<!DOCTYPE html> <html> <body> <div id="app"> <div>年龄: <input type="text" v-model="person.age"></div> <p v-if="info">{{ info }}</div> </div> <script src="https://unpkg.com/vue@
Vue中watch的用法总结
许魁的博客
01-22 435
话不多说，代码页： <template> <div class="about"> <p>{{num}}</p> <p><input type="text" v-model="num"></p> <p>{{str}}</p> ...
vue watch handler
H-L的博客
12-18 4324
普通监听 缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。 watch: { carts: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } } 高级监听 handle：wat...
vuewatch写法
10-10
对于Vue的watch，可以使用以下两种写法： 1. 对象写法： ``` watch: { // 监听firstName这个属性 firstName: { handler(newVal, oldVal) { console.log('firstName changed'); }, // 立即执行一次handler immediate: true, // 深度监听对象内部属性的变化 deep: true }, // 监听lastName这个属性 lastName: function(newVal, oldVal) { console.log('lastName changed'); } } ``` 2. 函数写法： ``` watch: function() { var self = this; return { // 监听firstName这个属性 firstName: function(newVal, oldVal) { console.log('firstName changed'); }, // 监听lastName这个属性 lastName: function(newVal, oldVal) { console.log('lastName changed'); } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

王佳斌

请作者喝杯咖啡 :)

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

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

打赏作者

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

抵扣说明：

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

余额充值