VUE 的updated钩子函数被死循环一样无限调用

最新推荐文章于 2024-05-08 17:37:56 发布
最新推荐文章于 2024-05-08 17:37:56 发布
阅读量1.4k 收藏
点赞数 4
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46473943/article/details/127967412
版权

今天发现了一个很奇怪的问题，就是发现updated钩子函数被死循环一样无限调用

代码如下

 大家想一下上面的代码有没有什么问题呢？

这样的代码会导致updated钩子函数被无限调用，但是为什么呢？？？

答案其实也不难，就是因为我们修改了被VUE管理的属性，也就是logisticsList，而且这个数据刚好是应用类型的，如何是其他普通类型如数字、字符串等则不会出现这种情况。

因为普通类型在进行赋值时VUE会判断内容是否改变，如果没有改变的话，updated钩子就不会被触发，所以也就不会死循环

而引用数据类型在赋值时是比较地址，在一个进程中每个对象的地址都是不一样的，所以必然会触发updated钩子，而updated钩子里面又对进行引用类型数据的赋值，这样就会引起死循环

我们最后解决方法是改用watch来解决的

章鱼哥明明德
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为什么vue的beforeUpdate和updated生命周期会不停的发送请求
范天缘的博客
11-04 3398
一般在vue2会把请求放在created()和mounted()生命周期引用, 有一天发现把请求放到更新周期里面调用,直接导致网页卡死,看了一下f12的network控制台 疯狂的发送请求 原因:问了一下前端组长,如果是请求方法里面 1.操作了data()里面的值 2.给data()里面的值赋了新值 就会不停的发送请求,把操作data()的代码注释掉就不会一直发送请求了 data(){ return{ loading:false } }, beforeUpdate(){ }, mth
VUE 生命周期的钩子函数介绍
NancyFyn的博客
04-09 223
生命周期 vue 实例或组件（组件本质上就是一个具有预定义选项的实例）创建到销毁的一系列过程，就叫做生命周期 生命周期的钩子函数 在生命周期不同的阶段中会自动执行的函数，就叫做生命周期的钩子函数 生命周期可以分为三个大阶段 • 初始化挂载阶段 i.beforeCreate ii.created iii.beforeMount iv.mounted • 更新阶段 i.beforeUpdat...
vue 钩子函数updated什么时候触发
最新发布
qq_40603125的博客
05-08 714
updated是Vue生命周期钩子函数之一，在组件的数据变化导致虚拟DOM重新渲染并应用到实际DOM之后触发。具体来说，updated会在以下几种情况下被触发：初始渲染完成后：当组件首次渲染完成并将虚拟DOM渲染到实际DOM之后，updated钩子函数会被调用。响应式数据变化时：当组件中的响应式数据发生变化时，虚拟DOM会重新渲染并应用到实际DOM，此时updated钩子函数会被调用。需要注意的是，updated在虚拟DOM重新渲染后立即触发，此时实际DOM可能还没有更新完成。
VUE的生命周期
tan270599153的专栏
01-26 335
1.VUE的生命周期的简介 对于使用vue.js来开发,那我们就必须知晓vue的生命周期，才能愉快的玩耍，而且也是面试的高频，但是vue官方给出的文档,那叫一个简单啊，如下图: 但是,如果只是看上面的生命周期图,对于新手来说, 有点云里雾里,接下来,就是我对VUE的生命周期的理解. 2.VUE的生命周期的详情 Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们称为Vue实例的生命周期. 钩子函数,就是上图中,红色椭圆框那些,比如:
vue 指令应用多次时，其动态值更新时，update会执行多次
tdjqqq的博客
04-21 3484
前几天在开发时，心血来潮自己开发了一个v-loading指令，然后就应用到了页面中，我的页面有多处使用了该指令，但是令我EMO的时候也来了， 页面很简单，只有三块区域，基本相同，但是中间有个显示后台结果的div区，我就想着，用指令来整个遮盖效果，所以，三个区域的结果区都有v-loading。 v-loading指令代码如下，重点是update，也恰恰是它给我整emo了，因为，当我给v-loading重新赋值时，指令中的update居然执行了【3次】（发现问题是因为页面没有v-loading了，因为执
Vue3:组合式 API：生命周期钩子(在setup阶段被同步调用)
weixin_62364503的博客
09-22 1324
Vue3:组合式 API：生命周期钩子(在setup阶段被同步调用)
第三篇、vue组件生命周期 beforeUpdate()和updated()
qq_59474517的博客
07-06 1603
vue生命周期第三章，生命周期 beforeUpdate()和updated()
深入理解Vue 的钩子函数
12-10
Vue 的生命周期中，钩子函数扮演着至关重要的角色，它们在组件的不同阶段执行特定任务，帮助开发者实现复杂的逻辑。Vue 提供了多个生命周期钩子，如 `created`、`mounted` 等，但理解它们之间的区别和应用场景至关...
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
Vue.js 是一款流行的前端框架，它的核心特性之一就是丰富的生命周期钩子函数，这些钩子使得开发者可以在组件的不同阶段执行特定的逻辑。本文将深入探讨Vue的钩子函数，特别是路由导航守卫和`keep-alive`组件，以及...
vue中各选项及钩子函数执行顺序详解
12-11
Vue实例的生命周期中包含了多个选项和钩子函数，这些在不同的阶段自动执行，帮助开发者管理组件的状态和行为。以下是Vue中各选项及钩子函数的详细解释和执行顺序： 1. **beforeCreate**：在实例化过程完成，但数据...
Vue 2.0中生命周期与钩子函数的一些理解
08-30
在updated钩子函数中，DOM已经被重新渲染。在beforeDestroy钩子函数中，Vue 实例已经被销毁，但是DOM还没有被卸载。在destroyed钩子函数中，DOM已经被卸载。 二、钩子函数详解 钩子函数是Vue 2.0 中的一种特殊函数...
【Vue 开发实战】基础篇 # 8：如何触发组件的更新
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-07 1141
因为 name 不是响应式，info 对象才是响应式，b 没有被视图使用。"this.name 发生了变化，但是并没有触发子组件更新""this.info 发生了变化，但是并没有触发子组件更新""this.list 并没有发生变化，但是触发子组件更新""data.b 发生了变化，但是并没有催发组件更新""触发 PropsAndData updated"【Vue 开发实战】学习笔记。点击这个三个都没有触发组件更新。
前端 vue生命周期
qq_43853213的博客
06-28 139
beforeCreatecreatedbeforeMountedmountedbeforeUpdataupdatedbeforeUnmountedunmountedvue3 compositionAPI生命周期有何区别keep-alive组件的生命周期在正常开发，挂载周期的执行顺序为：在数据更新阶段执行顺序为：在组件销毁阶段执行顺序为：...
前端面试题
m0_61845534的博客
09-25 92
1.vue双向数据绑定的原理
updated钩子函数实例化多次的问题
html_996的博客
03-25 785
继上篇文章继续补充一下 上一篇：添加链接描述 当我们的轮播需要添加 swiper-pagination 时，并且 添加一个数据双向绑定的 input 时， 我们会发现在我们改变 input 框里面的 value 时，我们的 swiper-pagination 按钮就不起作用了，原因是 updated 钩子函数被实例化多次 <!DOCTYPE html> <html lang=...
Vue数据更新页面却没有更新的几种情况以及解决方法
jyf_568的博客
11-01 6277
情况一：Vue无法检测实例被创建时不存在于data中的变量 原因：由于 Vue 会在初始化实例时对 data中的数据执行 getter/setter 转化，所以 变量必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 例如： 1 2 3 4 5 new Vue({ data:{}, template: '<div>{{message}}&l...
vue 修改数据界面没有及时更新nextTick
weixin_30613343的博客
08-30 474
使用场景：有些时候，我们使用vue修改了一些数据，但是页面上的DOM还没有更新，这个时候我们就需要使用到nextTick。 vm.$nextTick( [callback] ) 说明： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例...
Vue2中updated调用请求死循环怎么解决
07-15
在Vue 2中，当在updated钩子中发起请求时可能会导致死循环。这是因为在更新数据后触发的updated钩子中再次修改数据会导致组件重新渲染，从而又触发updated钩子，形成了一个循环。 要解决这个问题，你可以使用一个标志位来阻止死循环的发生。以下是一种可能的解决方案： 1. 在data中定义一个标志位，例如`requesting: false`。 2. 在updated钩子中，在发起请求之前，将标志位设置为true，表示正在进行请求。 3. 在请求完成后的回调函数中，将标志位重新设置为false。 4. 在updated钩子中添加一个条件判断，只有当标志位为false时才发起请求。 这样就可以避免死循环的发生。以下是一个示例代码： ```javascript data() { return { requesting: false, // 其他数据 } }, updated() { if (!this.requesting) { this.requesting = true; // 发起请求 // 在请求完成后的回调函数中将this.requesting重新设置为false } } ``` 请根据你的具体情况来修改示例代码。希望能帮到你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值