为什么vue中的watch在mounted之后执行

最新推荐文章于 2024-06-29 10:47:44 发布
最新推荐文章于 2024-06-29 10:47:44 发布
阅读量2.4k 收藏
点赞数 3
分类专栏： Vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40957332/article/details/120796967
版权
本文深入探讨Vue框架中组件的mounted生命周期钩子与响应式系统的交互。当在mounted内设置新值时，defineReactive函数内部的set方法被触发，通过dep.notify()通知订阅者更新视图。这一过程揭示了Vue如何实现数据变化到视图更新的高效同步。

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

首先，在调用mounted的时候，会进入到defineReactive函数，然后调用函数里面的set方法，将mounted中赋的新的值给传递过去，并通过调用dep.notify( )把消息发送给订阅者，继而更新订阅者的列表
后面才开始渲染watch进入Watcher的class

vue props 接收数据，watch和mounted同时完成数据渲染
RightNaid的博客
04-21 2619
vue props 接收数据，watch和mounted同时完成数据渲染 在子组件里，接收数据之后可以直接mounted里操作数据 export default { name: 'zblist', props: { lists:Array }, data() { return { show: true, Tlist: this.lists, li...
vue关于watch和methods值执行顺序问题，以及解决方案
九日的博客
07-01 5304
问题 父组件： <GroupTransform :is-show.sync="selectPeopleDialogVisible" @callback="getSelectedPeople" ></GroupTransform> watch: { selectGroupRight: { handler(val) { }, deep:
watch事件使用立即实行如何在mounted后（DOM 更新之后)执行.（精辟，细节）。用 this.$nextTick(() =＞ {}）实现。
最新发布
this__valve的博客
06-29 782
在 mounted里面实例。监听一个 props 的变化，并在变化发生时执行不同的实例方法，同时由于需要在监听时立即执行，但又碰到了实例化类的顺序问题。然而watch立即执行时，类还未实例。需要watch监听值的变化执行不同的方法，且为保留数据监听必须immediate: true立即执行。用来延迟执行监听改变时执行的关于mountde里面实例的类。使得在实例完成后又可以马上使用实例方法。监听器在组件挂载完成后立即执行一次，而不必等待值的实际变化。然而接收父传入的值 （多选框）变化去执行不同的实例方法。
解决nuxt页面中mounted、created、watch执行两遍的问题
老头学编程的博客
11-07 4231
** 这篇文章主要介绍了解决nuxt页面中mounted、created、watch执行两遍的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 前言： 在开发中偶然检查Network请求的时候发现，在页面中created钩子函数中请求了一个接口，但是页面这个页面加载的时候，接口会连续请求两边，然后我就排查是否有其他地方调用了同样的接口，检查了好几遍后发现并没有，WTF，然后我在created中打印了一下，惊奇的发现。。。created会执行两次打印。。。 WTF、WTF、WTF，小朋
vue-created、mounted、watch、computed的执行顺序
xxuxioxx的博客
07-01 5210
浅析vue生命周期和watch属性
watch 和mounted 执行顺序
hantanxin的专栏
05-26 4093
当watch设置了immediate:true的情况下 watch 先执行，mounted 后执行
vue 页面回退mounted函数不执行的解决方案
10-15
在开发过程中，开发者可能会遇到一个问题：当从一个页面跳转到另一个页面，然后再通过浏览器的返回按钮回退到原来的页面时，发现原始页面的 `mounted` 钩子函数并没有再次执行，导致数据无法更新。这个问题涉及到 ...
解决vue2 在mounted函数无法获取prop中的变量问题
12-03
如下所示； props: { ...以上所述是小编给大家介绍的解决vue2 在mounted函数无法获取prop中的变量问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大
vue中created和mounted的区别浅析
10-16
在Vue中，组件从创建到销毁整个生命周期内会经历多个阶段，Vue为开发者提供了多个生命周期钩子函数，以便在特定的生命周期阶段执行相关的逻辑操作。在这些钩子中，created和mounted是两个非常重要的钩子，它们各自...
在vue中created、mounted等方法使用小结
10-15
在Vue实例的生命周期中，有多个关键的生命周期钩子函数，如`created`、`mounted`等，它们分别在不同的阶段执行，帮助开发者在合适的时机进行数据处理、DOM操作或事件绑定。下面是对这些生命周期钩子的详细说明： 1....
Vue3中watch和watchEffect区别和用法
菠萝蜜
09-14 312
使用过 Vue 的小伙伴，不管时 Vue2 还是 Vue3，我相信你都用过 Vue 中的监听器。监听器的作用就和它的名字一样：用来监听某个东西是否发生变化！我们很多需求都会用到监听器 watch，但是 Vue2 和 Vue3 中的监听器的用法有些许不一样，这就让一些从 Vue2 转 Vue3 的小伙伴不太适应，所以，我们今天就来好好学一学 Vue3 中的监听器如何使用！
Vue3中常用的一些方法使用手册
quequnlong的博客
03-21 702
在vue3中我们想要引入一些子组件的话直接导入即可，不需要在使用compoment包裹。
VUE的watch和computed执行顺序
相濡以沫不如相忘于江湖.
08-03 1762
VUE的watch和computed执行顺序
vue的计算\监听属性、created、mounted
Pert的博客
10-10 1303
computed：计算属性。在页面一开始就会自动执行。只有当return的值发生改变时才会重新执行 watch：监听属性。监听的变量发生改变时执行 created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 <template> <div id="a"> {{m}}<br>{{a}} &lt.
解决页面加载时，watch和mounted声明周期钩子冲突，先后各执行一次
lebron25的博客
10-07 1189
解决页面加载时，watch和mounted声明周期钩子冲突，先后各执行一次，解决页面加载执行两次方法
探索vue中watch在任务执行队列中的执行时间
orq18810575870的博客
08-15 2269
先说本文的结论：watch的处理函数是在同步函数都执行完毕之后，在浏览器更新DOM之前执行 首先来看官方 这样子，实际上只会有一个输出：test 10 接着，如果我们在有这样一个html结构： Watch的结构如上图所示，this.$refs[‘test-watch’]的输出结果是undefined。 如果我们在调用testFun后，执行一些其他的指令，也...
vue.js竟然可以这么玩!
weixin_44105087的博客
06-12 223
Vue.js 父子组件生命周期顺序 /* 加载渲染过程 */ parent beforeCreate ↓ parent created ↓ parent beforeMount ↓ child beforeCreate ↓ child created ↓ child beforeMount ↓ child mounted ↓ parent mounted /* 更新过程 */ // 子组件更新
mounted与activated的执行顺序
Pei_hua100的专栏
09-16 8395
mounted是挂载vue实例后的钩子函数 activated是组件被激活后的钩子函数 mounted的时候 是不保证组件已在document中。也就是说组件还没有被激活，所以activated可以理解为在mounted之后执行。在定义变量和执行函数的时候需要注意放置的钩子函数位置。其次源码实现中，在渲染组件时，也是会先判断是否组件是否挂载过，如果没有会先执行mount的hook函数。 ...
Vue 先执行父组件mounted再执行子组件mounted
Xmengyan的博客
01-08 805
通过打印 this 发现，有一个 _isMounted 属性，表示当前是否挂载完毕（true：挂载完毕，false：没有挂载完成），在父组件挂载前将 _isMounted 存在 window 中，挂载后更新 _isMounted。可以看出是先子组件 mounted 之后父组件 mounted，那么，如何实现父组件 mounted 完毕后再子组件 mounted 呢？父组件先进行创建，在挂载(mounted)前，子组件进行创建+挂载，子组件挂载完成后父组件挂载。了解父子组件生命周期的执行顺序。
vue中的watch和mounted顺序
03-16
在Vue中，watch和mounted的执行顺序是先执行mounted，然后再执行watch。也就是说，在组件实例化后，mounted钩子函数会被调用，然后才会开始监听watch中的数据变化。因此，如果在watch中使用了mounted中的数据，需要注意执行顺序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值