vue中watch handler 中deep immediate属性以及用法

最新推荐文章于 2024-04-08 06:39:38 发布
最新推荐文章于 2024-04-08 06:39:38 发布
阅读量296 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010343074/article/details/116734965
版权

使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。 设置为true

当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true

之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

immediate:true代表如果在 wacth 里声明了 viewDetials之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

设置deep: true 则可以监听到newTemplateForm 的变化，此时会给newTemplateForm 的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：'newTemplateForm .cycleUpkeep'

奔跑的香蕉Go
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0 watch里面的 deep和immediate用法说明
01-18
immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。 computed: { btnObj() { const { sign_img, check } = this ...
关于vue中watch检测到不到对象属性的变化的解决方法
08-28
这篇文章将介绍解决这个问题的方法，并详细解释 Vue 中的 Watch 机制和深层监视对象属性的变化。 一、Vue 中的 Watch 机制 Vue 的 Watch 机制是指在组件中使用 Watch 属性来监视数据的变化。当数据发生变化时，...
vue watch handler
H-L的博客
12-18 4306
普通监听 缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。 watch: { carts: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } } 高级监听 handle：wat...
vue.js监听属性watch(handler方法immediate属性deep属性)
Amanda_wmy的博客
11-05 2万+
vue.js监听属性watch(handler方法immediate属性deep属性) <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p>
前端面试：vue组件watch中deep和immediate的作用
qq_43592064的博客
05-31 330
vue组件watch中deep和immediate的作用
深入理解Vue 3.0中的watch属性immediate和deep的用法
最新发布
chenchuang0128的博客
04-08 1367
Vue 3.0中的watch属性提供了更强大和灵活的监听功能，尤其是在使用immediate和deep属性时。immediate属性可以帮助你在数据首次绑定时执行特定的逻辑，而deep属性则可以让你深入地监听复杂对象的任何变化。使用deep属性，我们可以对对象的任何层级进行监听，包括对象内部属性的变化。Vue 3.0中的watch属性允许你对Vue实例中的数据属性进行监听，并在数据发生变化时执行相应的回调函数。在上面的示例中，我们通过使用deep属性，可以监听到user对象内部属性的任何变化。
vue中的watch监听数据变化及watch中各属性的详解
10-18
主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
详解Vue中watch的详细用法
10-17
在Vue实例中定义`watch`，可以监视数据属性并执行相应的回调函数。基本的`watch`用法如下： ```javascript new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { ...
详解Vue中watch的高级用法
08-27
Vue 中 watch 的高级用法详解 ...使用 watch 的时候，我们需要了解 handler 方法和 immediate 属性的用法，以及 deep 属性的作用。只有这样，我们才能更好地使用 watch 功能，并提高我们的开发效率。
Vue中对watch的理解（尤其是immediate和deep属性）
~~
10-02 6万+
$watch()监听某个值（双向绑定）的变化，一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果！！ 首先确认 watch是一个对象，一定要当成对象来用。对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二...
vue 中的watch 的deep属性
wangzhen12138的博客
01-19 1620
在项目中，我们可以通过组件的传参来判断组件所操作的事件，通过watch来进行传参的数据内容的监听，比如0-1 1-0 来进行判断。需要注意的是，深度观察对象会导致性能下降，因为每次对象发生变化时都需要递归遍历对象的所有属性。只观察一个对象的基本属性的变化。但是，如果你需要观察对象内部属性的变化，就需要使用。是一个用于观察和响应 Vue 实例上的数据变化的选项。时，Vue 会监视该属性的变化并在变化时执行相应的回调函数。选项的一个属性，用于深度观察一个对象的变化。属性时应该谨慎，并仅在必要时使用。
VueJs探索之watch用法详解
热门推荐
itKingOne的博客
04-07 10万+
Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。 var vm = new Vue( { el: '#app', data: { childrens:
Handler机制详述1---Handler的简介和用法
天马行空的专栏
05-07 1608
1.Handler简介     handler是Android系统封装的用于线程更新UI，消息处理的机制。 ［说明］ 查看Android Framework源码可以看到，常见的Activity的生命周期onCreate(), onStart(), onResume(), onPause(), onStop(), onDestroy()都是通过handler发送不同Message，AMS（Ac
vue watch handler
weixin_34383618的博客
01-10 2651
普通监听 缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。 watch: { carts: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } } 复制代码高级监听 handle：watch中需...
Vue-侦听属性watch(handler方法,immediate和deep属性)
陈坚泓的博客
11-07 5427
Vue-侦听属性watchwatch选项handler方法和immediate属性deep属性字符串形式监听注销watchwatch监听路由 watch选项 当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 <div id="app"> <p>FullName: {{ fullName }}</p> &lt...
Vue---vue中watch对象监听属性deep与immediate的使用
COCOLI_BK的博客
07-06 1531
主要针对值为函数handler监听来使用的 deep:true immediate:true 这里一般使用最多的是deep:true,处理对象内部属性的变化，常用写法如下：
【Vue 基础】-- Watch的deep参数技巧
野生松
07-15 2323
deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。 watch: { obj: { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true, deep: true } } 优化：我们可以使用字符串的形式监听 wat
vue中watch用法
09-07
在Vue中，可以使用watch来...可以使用简单的watch，也可以使用immediate和deep属性来实现更复杂的监听需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值