VUE、简单理解：到底什么时候用watch监听属性变化合适呢？

最新推荐文章于 2023-03-24 16:57:33 发布
最新推荐文章于 2023-03-24 16:57:33 发布
阅读量1.2k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/moxTY/p/10538086.html
版权
什么时候用比较合适呢？
比如当data数据从父组件传递给子组件，子组件接受，然后这个值再次在父组件发生变化的时候，dom元素重新渲染页面，就要用watch在子组件监听这个变化。
 
不多比比，上图：
props接收listData，但是listData会在父组件再次变化：（而子组件又没有一个点击事件去传递这个变化，那就搞个监听事件）
 
 
如有偏差，欢迎指教。

转载于:https://www.cnblogs.com/moxTY/p/10538086.html

weixin_30898109
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue watch 发送数据到子组件_在vue中，为什么父组件的值改变后，过几毫秒子组件才能watch到prop的变化，附代码？...
weixin_39593469的博客
01-30 78
从以下几个方面来回答这个问题：为什么会有延迟这个问题要从Virtual Dom说起，Vue的使用者只负责处理状态就行了，真正的页面渲染都交给Virtual Dom来做。并不是我们做的每一次状态修改都会立即触发页面Viritual Dom，会等主任务执行完后，相关操作已放在nextTick(使用Promise, MutationObserver, setImmediate, setTimeout等技...
用Vue.js实现监听属性的变化
11-26
创建 Vue 实例时，Vue 将遍历 data 的属性，通过 ES5 的 Object.defineProperty 将它们转为 getter/setter，在其内部 Vue 可以追踪依赖、通知变化。 const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部，同...
三十九、Vue中监听器 watch 的使用
panchang199266的博客
05-15 798
一、使用场景   当我们需要监听某个属性时在变化时触发一系列的逻辑，那么就可以利用监听器实现。 二、案例   当父组件接收到子组件传递过来的值时，顺次加1 1.父组件传递数值给子组件 <template> <div> ..... <city-list :letter="letter" /> </div> </templat...
vue 的computed和watch在什么时候触发
IT老炮-大钊的博客
01-08 5954
computed是通过计算来产生一个结果，只有当这个结果需要在使用的时候，才会触发。 watch：是在值发生变化的时候触发。 例如： <template> <view> <view v-if="ckLogin"> 已经登录 </view> <view v-else> 没有登录 </view> </view&
深入理解vue的watch触发时机
weixin_43546457的博客
03-24 2449
当所监测的数据发生变化时，Vue 会在下一个更新循环中检测到数据的变化，然后触发 watch 钩子函数。在 watch 钩子函数被触发执行前，Vue 会先执行一个数据变化的队列，将所有变化的数据都执行更新，然后才执行 watch 钩子函数。
$watch和watch属性的使用
weixin_30362801的博客
05-16 921
$watch和watch属性都是监听值的变化的,是同一个作用，但是有两个不同写法。 用法一： this.$watch((newVal,oldVal)=>{ }) 注意：这种方法是监听不到对象的变化的。 用法二： watch:{ xxx：（newVal,oldVal)=>{ // xxx是data里的数据 } }...
vue中的watch监听数据变化及watch中各属性的详解
10-18
主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
解决Vue2.0 watch对象属性变化监听不到的问题
10-18
今天小编就为大家分享一篇解决Vue2.0 watch对象属性变化监听不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue watch监听对象及对应值的变化详解
11-26
然而，对于对象`b`，如果我们只简单地监听`b`，Vue不会跟踪其内部属性的变化，比如`b.c`。为了监听对象或数组的深层变化，我们需要使用`deep: true`选项。在`watch`对象的`b`属性下，设置`deep: true`后，当`b`的...
浅谈vue.watch的触发条件是什么
01-22
很多人习惯用watch，但是却很少有人知道watch的真正触发条件。如果不是对vue原理了如指掌，请谨慎使用watch。 示例1，下面会触发watch 吗？ [removed] new Vue({ data() { return { city: {id: 1, name: 'Beijing'} } }, watch: { city() { console.log('city changed') } }, created() { this.city = {id: 1, name: 'Beijing'} } }) [removed] 会触发，因为在cre
在点击事件中的判断基于watch生成的一个变量，执行先后顺序
qq_43067405的博客
05-13 294
watch: { checkIndex(newData, oldData) { this.switchOrNot = true; console.log("切换了"); console.log(this.switchOrNot); } }, methods: { deleteButton(index) { this.checkIndex = index; if (this.ol
watch深度监听和立即触发的使用
m0_62118859的博客
05-09 1518
deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。 watcharray: { handler(val) { console.log(val); }, // 开启深度监听 deep: true } immediate：立即触发回调函数。 watcharray: { handler(val) { console.log(val); }, ..
Vue中watch的用法
热门推荐
MQJ
11-04 8万+
4、deep，当需要监听一个对象的变化时，普通的watch方法无法监听带对象内部属性的变化，只有data中的数据才能够坚挺到变化，此时需要deep属性进行深度监听，设置deep：true，当对象的属性较多是，每个属性的变化都会执行handler。6、watch中不要使用箭头函数，即不要用箭头函数来定义watcher函数，因为箭头函数中的this是指向当前作用域，对于箭头函数来说，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象。
vue使用watch(监听属性)
GuAng
08-26 2567
监听属性(watch)：vue数据是响应式数据:指的是数据可以进行跟踪和监听。 1.比较常用的使用方法 watch:{ // 属性是要监听变化的数据，属性值是监听函数 msg:function(newValue,oldValue){ console.log(newValue); // 变化之后的值 console.log(oldValue); // 变化之前的值 } } 2.直接写一个监听函数
Vue如何正确使用watch监听属性变化
无声告白
02-18 8209
Vue中可以使用监听器监听属性的变化，并根据属性变化作出响应。但一旦涉及到复杂数据的监听（如Object，但数组一般不需要，因为Vue针对数组做了特殊处理）时就比较复杂了，本文解释了使用watch监听属性变化的方法，包括复杂数据。 基本用法 Vue watch最重要的使用场景是根据某属性的变化执行某些业务逻辑: <template> <input type="number" ...
【Vue】Computed和watch使用场景（细数深度监听那些事）
Emily's Blog
09-10 2942
Computed和watch使用场景和方法computed computed 适用情况：拿到的值不是我们想要直接显示的。 注意：可以设置，但不建议这么做 实例：
vue计算属性computed和侦听器watch的使用场景
大师兄
11-16 3412
原文链接:https://dsx2016.com/?p=679 微信公众号: 大师兄2016 特点和区别 vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步. 这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分. computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的...
Vue中Watch侦听器的简单用法
夜听雪的博客
04-29 595
之前做过关于数据不是定值，而是由其他数据计算而得来的页面。 以前学艺不精，只会一些Vue的简单用法，所以之前都是用的methods方法，在输入框上绑定input或者change事件，输入数据时，修改结果的效果，来达到数据动态由其他数据计算得来的。 ...
vue2watch监听数组变化
最新发布
11-30
Vue2中可以使用$watch方法来监听数组的变化。具体实现方法如下： ```javascript watch: { arrayData: { handler: function (newVal, oldVal) { console.log('arrayData changed') }, deep: true } } ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值