vue watch 发送数据到子组件_在vue中，为什么父组件的值改变后，过几毫秒子组件才能watch到prop的变化，附代码？...

最新推荐文章于 2022-03-27 23:24:58 发布
最新推荐文章于 2022-03-27 23:24:58 发布
阅读量78 收藏
点赞数
文章标签： vue watch 发送数据到子组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39593469/article/details/113548597
版权

从以下几个方面来回答这个问题：为什么会有延迟

这个问题要从Virtual Dom说起，Vue的使用者只负责处理状态就行了，真正的页面渲染都交给Virtual Dom来做。并不是我们做的每一次状态修改都会立即触发页面Viritual Dom，会等主任务执行完后，相关操作已放在nextTick(使用Promise, MutationObserver, setImmediate, setTimeout等技术实现)，这个过程就会产生延迟。如何做到父改了值立即触发子watch

在Vue 1.0 中有一个配置是async，配置方法如下：

Vue.config.async = false

当设置为false的时候。状态变化后不再使用微任务执行，watch会立即在主任务实行。

对于问题中提供的HTML，打印出来的顺序会是：

父组件改变age值后：1595040462300毫秒，子组件才监控到变化，变化前age:1,变化后age:2,此时子组件中的age值为:2

test.html:94 父组件中的age值为：2

test.html:64 子组件中的age值为：2

每当有任何状态变化，立即触发Observable，子组件的watch就会先于父的下一行代码执行。

但是，vue这么做会有很大的性能问题，所以1.0文档上说这个状态只用于调试。2.0文档上已经标明删除了，但是考虑到兼容性，Vue源码上还保留着，并且源码确保了生产环境不使用sync模式。从Vue 2.0 源码上看这个问题

在更新state后会触发watch，执行了queueWatcher, 相关源码如下：

最低0.47元/天 解锁文章
weixin_39593469
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
watch监听，解决Vue3父组件异步props传值，子组件接收不到的问题
weixin_46764819的博客
12-14 7556
写静态数据的时候父组件传值子组件接收并渲染是没问题的，但当父组件异步获取数据，子组件接收数据会晚于渲染，就会产生接收不到的问题，我在用echarts绘制图表时图表就直接不显示。用watch监听props数据并在watch内进行赋值操作可解决该问题。子组件props正常接收，但是接收的数据要放在watch中监听。父组件，vue3语法。看一下控制台打印顺序。
解决Vue2.0 watch对象属性变化监听不到的问题
12-01
问题 很早之前就遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法了。 解决 为啥出现这种问题？受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式： 通过vue的this.$set(object, key, value)方法 通过Object.assign()重新创建一个对象, 例如this.someObject = Object.assign({}, th
vue 子组件watch监听不到prop的解决
10-14
主要介绍了vue 子组件watch监听不到prop的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
java中对象，属性，和方法的关系到底是怎么样的?
qq_44639795的博客
12-27 993
5.object和Class的深入理解---属性和方法 参见以上例子，title就是对象的属性，close就是对象的方法，简单来讲，所有对象的方法都一样，就写在类中，只写一份。对象属性的值，每个对象和每个对象都不一样。既然对于所有对象来讲，方法都一样，而只有属性不一样，能区分对象的，就只有属性了，这样来讲，观察属性，就显得尤为重要。我们可以认为，方法就是用来改变属性的。就 拿上个例子来讲： @马克...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
在Vue.js中，数据流动通常遵循单向数据流原则，即数据从父组件流向子组件，但不直接从子组件反向修改。然而，有时子组件确实需要改变来自父组件的某些属性，这时可以通过`v-bind`的修饰符`sync`来实现数据的双向绑定...
vue父组件触发事件改变子组件的值的方法实例详解
10-17
在子组件中，我们可以声明需要接收的props，然后在父组件的模板中将相应的值绑定到这些props上。例如，父组件的HTML部分： ```html <ChildComponent :searchValue="search"></ChildComponent> ``` 在子组件的`...
vue中如何让子组件修改父组件数据
08-27
在子组件中，我们可以使用 $emit 方法来发送事件给父组件，父组件可以监听这个事件来修改数据。 ``` // 在子组件中 添加 (item, index) of books" :key="index">{{item}} export default { data() { ...
vue数组无法监听问题 watch对props监听第一次监听不到
许洪源的博客
07-26 2913
vue数组无法监听问题 watch 一、vue监听数组 vue实际上可以监听数组变化，比如 data () { return { watchArr: [], }; }, watchArr (newVal) { console.log(‘监听：’ + newVal); }, created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000); }, 在比如使用splice(0,2,3)从数组下标0删除两个元素，并在下标0插入一个元素3
Vue2.0 解决watch对象属性变化监听不到问题
leg的博客
02-27 2万+
问题 很早之前就遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法了。 解决 为啥出现这种问题？受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式： 通...
vue 2.0 watch 监听对象的变化
DreamFJ的博客
08-22 243
转自：https://www.cnblogs.com/anani/p/9287986.html
记录一下vue2中watch监听props中的值，不生效的问题
m0_55304282的博客
03-24 3309
今天遇到了一个问题,可能自己习惯写vue3的写法，忘记了vue2中的写法。在此记录一下 我在props中申明了一个接受了父组件传下来的value props：{ value:{ type:String } } 在watch中错误的使用了使用了this.value 。我的理解是写死了。正确的写法是 ...
解决vue中用watch监听父组件向子组件动态传递的数据时第一次不能加载的问题
ProGram_Java521的博客
03-27 2746
转载：https://blog.csdn.net/yjyRain/article/details/109615162 问题：最近在使用vue做项目时，遇到一个关于子组件用props接收父组件传递过来的数据进行页面渲染时第一次打开页面数据不能加载的问题，我的子组件是一个对话框，第一次打开对话框时不能加载到父组件传递的数据，关闭后从新打开数据才能加载。刚开始我的方法如下： 父组件： 子组件：使用watch来响应数据的变化，普通的监听方式，写一个监听函数，这种方式在对话框第一次打开的时候无法加载到数据。 后来采
vue watch 发送数据到子组件_vue中如何让子组件修改父组件数据
weixin_42300574的博客
02-11 427
一、关于vue中watch的认识我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候•1、常见的使用场景•2、如果要一开始就执行•3、深度监听(数组、对象)二、关于子组件修改父组件属性认识在vue2.0+ 后不再是双向绑定,如果要进行双向绑定需要特殊处理。[Vue warn]: Avoid mutating a prop directly since the value wil...
【vue】prop更新，子组件不重新渲染的解决方法
qq_34838046的博客
09-26 5241
1.添加prop的侦听器 props:['xxx'], data(){ return{ yyy } } ... watch:{ xxx:function(newValue){ this.yyy=xxx } }
vue中使用watch监听对象，监听方法没有被触发的原因
weixin_37744901的博客
11-13 4704
watch: { friendList:{ //注意，这里是对象 handler(val){ }, deep:true } }， computed:mapGetters({ friendList:'getFriendList' }), mounted(){ this.$store.dispatch('editFriendList', hy.friendList); } 下面是vuex中，mutations的内容： EDIT_FRIEND_LIST (state, data) {
Vue父子组件状态同步的最佳方式
前端交流群:954854084
09-10 338
平时我们在使用Vue开发的时候，可能会遇到需要父组件与子组件某个状态需要同步的情况，通常这个是因为我们封装组件的时候有一个相同的状态外面要用，里面也要用，今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能，只需要父组件通过 props 传递给子组件就好了，但是理想很丰满，现实很骨感，如果我们直接在子组件更改传进来的 props ，不出意外浏览器会给你一坨大红色的报错，因为在Vue中我们的数据流动是自上而下的，而子组件直接更改父组件传来的 props 则是自下而上的数据流动，这是Vue不允许
vue中watch不触发、不生效的解决办法及原理
热门推荐
王一诺Eno
01-31 8万+
vue项目下props传进去的数据,生命周期勾子函数包括watch不触发的解决办法遇到的问题方案解决过程一方案解决过程二总结: 出现问题尽量先找官网 首先确定是自己没有了解到官方api的正确使用或者是一些特定解决方案，如若对您有帮助，麻烦点个赞吧~感谢~ 遇到的问题 在深层props过程中，props的数据传到了目标文件 但却没有触发数据更新及页面更新； watch代码如下： watch: {...
vue3中父组件向子组件传了一个数组，子组件watch监听不到父组件传的值
最新发布
06-12
如果你要在子组件中监听父组件传递的数组变化，你需要用到Vue3提供的一个新API——`watchEffect`。 具体实现方法如下： 在子组件的`setup`函数中，使用`watchEffect`监听父组件传递的数组： ```javascript import...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值