watch的immediate、deep、handler使用

于 2022-11-14 16:05:04 发布
阅读量733 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46125684/article/details/127849334
本文详细介绍了Vue.js中watch对象的immediate和deep属性。immediate属性用于指定组件初始化时是否立即调用handler函数，而deep属性则决定了是否深度监听对象属性变化。对于复杂的数据结构，理解并恰当使用这两个属性对于响应式更新至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

watch: {
    demo: {
      immediate: true,
      deep: true,
      handler: function (val) {
        //执行方法
      },
    },
  },

handler：其值是一个回调函数。即监听到变化时应该执行的函数。

deep:其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）

immediate:其值是true或false；确认是否以当前的初始值执行handler的函数。

immediate很好理解，即为data里面定义了demo后就立即执行handle。

Vue - watch 三种不同写法及场景用法（immediate、handler / deep）
资深程序员
01-10 2284
前言 官方文档（侦听器）：https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8 通过使用 watch 来监听或响应数据的变化，大致用法有如下几种， 每种写法没有好坏之分，只是使用场景不同而已。 一、常规监听 注意：这种监听方式，当值首次绑定的时候，不会执行监听函数。 —— 例如，父组件向子组件 动态传值（props） 时，子组件 props 首次获得传值后，不会触发监听。 很常见的写法，后续每当变量（对象同理）
vue 侦听器watch 之 深度监听 deep 以及 immediate
Don't disturb me!的博客
08-17 2990
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div> </template> <script> export default { data(){
vue watch监听 handler，deep，immediate用法
dqwdnishi的博客
01-13 590
我们使用watch监听数据时，有三个选项，handler，deep，immediate 该值默认是false，在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作，
vue.js监听属性watch(handler方法immediate属性deep属性)
热门推荐
Amanda_wmy的博客
11-05 2万+
vue.js监听属性watch(handler方法immediate属性deep属性) &lt;div&gt; &lt;p&gt;FullName: {{fullName}}&lt;/p&gt; &lt;p&gt;FirstName: &lt;input type="text" v-model="firstName"&gt;&lt;/p&gt;
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) ...
vue watch handler
H-L的博客
12-18 4377
普通监听 缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。 watch: { carts: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } } 高级监听 handle：wat...
vue配置项---watch的使用
weixin_46545002的博客
08-10 1255
vue的配置项--watch的使用
vue2.0 watch里面的 deep和immediate用法说明
01-18
immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。 computed: { btnObj() { const { sign_img, check } = this ...
详解Vue的watch中的immediate与watch是什么意思
10-15
总结来说，Vue的watch侦听器提供了非常强大的数据监控能力，通过合理使用immediate和deep属性，可以更精确、高效地对数据变化做出响应。这不仅有助于调试程序，还能在实际的开发中处理复杂的交互逻辑。
vue项目中使用watch监听 immediate
seimeii的博客
12-21 1444
标题
vue监听属性watch中的handler
晚星的博客
08-04 8304
handle:watch中需要具体执行的方法 deep：需要监听的数据的深度，一般用来监听对象中某个属性的变化,数组字符串一般不需要 immediate：在选项参数中指定 immediate: true将立即以表达式的当前值触发回调 <input type="text" v-model="cityName.name"/> new Vue({ el: '#root', data: { cityName: {id: 1, name: 'shanghai'} }, wat.
show-overflow-tooltip vue.js监听属性watch
weixin_45644355的博客
09-29 501
show-overflow-tooltip text-over vue.js监听属性watch(handler方法immediate属性deep属性) intro.js flex-column align-self: stretch;
vue $watch监听属性之 监听函数 handler() 以及 immediate:true立即执行
weixin_45810135的博客
10-12 6790
vue watch 属性 handler 方法就相当于普通侦听器触发的事件,即:当数据变化时要执行的操作 例如:点击路由,跳转的时候传递参数,监听到参数变化实现动态切换路由样式 immediate:true 立即执行 :当刷新页面时会立即执行一次handler函数 使用场景: 不加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面时,选项会回到默认位置1-1 加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面时,选项仍在在2-1位置
watch中的immediate、handler和deep属性
Cool_so_cool的博客
04-26 3529
vue中的watch监听 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。） 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。 当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true immediate:true代表如
Vue中watch（immediate、handler和deep）
yangyang的专栏
10-28 1107
参考文章： https://www.cnblogs.com/shiningly/p/9471067.html
Vue中watch选项handle、deep、immediate是什么
yangyang的专栏
08-23 2495
handle：就是你watch中需要具体执行的方法 deep：就是你需要监听的数据的深度，一般用来监听对象中某个属性的变化 immediate：在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调 参考文章： https://segmentfault.com/q/1010000017020494/a-1020000017021145 https://blog.csdn....
watch的handler
07-28
如果我们想要在watch绑定时就立即执行handler方法，可以在watch对象中声明immediate属性，并将其设置为true。这样，handler方法会在绑定时立即执行一次，而不需要等到属性发生变化才执行。\[3\]这对于一些需要在初始...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值