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中的updated和$nextTick
weixin_30469895的博客
07-15 2231
$nextTick用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。 updated用法：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 this.$nextTick()可以用作局部的数据更新后DOM更新结束后的操作，全局的可以...
updated钩子函数实例化多次的问题
html_996的博客
03-25 784
继上篇文章继续补充一下 上一篇：添加链接描述 当我们的轮播需要添加 swiper-pagination 时，并且 添加一个数据双向绑定的 input 时， 我们会发现在我们改变 input 框里面的 value 时，我们的 swiper-pagination 按钮就不起作用了，原因是 updated 钩子函数被实例化多次 <!DOCTYPE html> <html lang=...
为什么vue的beforeUpdate和updated生命周期会不停的发送请求
范天缘的博客
11-04 3387
一般在vue2会把请求放在created()和mounted()生命周期引用, 有一天发现把请求放到更新周期里面调用,直接导致网页卡死,看了一下f12的network控制台 疯狂的发送请求 原因:问了一下前端组长,如果是请求方法里面 1.操作了data()里面的值 2.给data()里面的值赋了新值 就会不停的发送请求,把操作data()的代码注释掉就不会一直发送请求了 data(){ return{ loading:false } }, beforeUpdate(){ }, mth
Vue基础技能【六、自定义指令、过滤器、插槽、动画】
02-18 181
1、自定义指令 1.1、定义指令 作用：帮助我们实现对于一些原生DOM的操作。比如说，页面一进入输入框就获取焦点；比如焦点离开输入框就开始验证。 定义自定义指令： 全局注册 Vue.directive('指令名',{ 配置项 }) // 全局注册要放在Vue实例化之前 局部注册 new Vue({ el:"", ... directives:{ 指...
vue 钩子函数updated什么时候触发
最新发布
qq_40603125的博客
05-08 646
updated是Vue生命周期钩子函数之一，在组件的数据变化导致虚拟DOM重新渲染并应用到实际DOM之后触发。具体来说，updated会在以下几种情况下被触发：初始渲染完成后：当组件首次渲染完成并将虚拟DOM渲染到实际DOM之后，updated钩子函数会被调用。响应式数据变化时：当组件中的响应式数据发生变化时，虚拟DOM会重新渲染并应用到实际DOM，此时updated钩子函数会被调用。需要注意的是，updated在虚拟DOM重新渲染后立即触发，此时实际DOM可能还没有更新完成。
Vue----生命周期
Damys
08-14 269
简述 在beforeCreate时，vue的el还没有绑定元素 在beforeMount时，只是虚拟节点挂载渲染，到了Mount才是挂载完毕，也就是挂载后。 在updated中，可以进行dom的一些操作，但不可以在其中更改data组件中的值，否则会继续更新beforeupdate，updated，然后陷入死循环。 在beforeDestory时，此时的实例对象还没有销毁，完全可用。只有Destor...
vue 指令应用多次时，其动态值更新时，update会执行多次
tdjqqq的博客
04-21 3455
前几天在开发时，心血来潮自己开发了一个v-loading指令，然后就应用到了页面中，我的页面有多处使用了该指令，但是令我EMO的时候也来了， 页面很简单，只有三块区域，基本相同，但是中间有个显示后台结果的div区，我就想着，用指令来整个遮盖效果，所以，三个区域的结果区都有v-loading。 v-loading指令代码如下，重点是update，也恰恰是它给我整emo了，因为，当我给v-loading重新赋值时，指令中的update居然执行了【3次】（发现问题是因为页面没有v-loading了，因为执
vue updated
weixin_30849591的博客
05-16 1950
updated方法的触发条件———— 当data中定义的数据有变化时就会加载updated方法 转载于:https://www.cnblogs.com/sanhao/p/10874701.html
vue误用生命周期及数据请求陷入死循环，商城项目坑点（2）
qq_43440532的博客
10-31 1597
一.在进行数据请求时，将数据请求写在了beforeUpdate和updated中，进入了死循环。 此时已经进入了一个死循环， 数据在疯狂的打印，也就是说更新的两个钩子函数疯狂的给你输出，但是明明数据没有变化。 原因：由于数据请求写在了更新的生命周期中，所以一请求数据就更新了data中的数据，一更新又接着执行数据请求，又进行赋值，数据再次更新，它就又去执行钩子函数，然后又去请求，然后又执行钩子函数，然后.....奔溃了。 解决办法：可以使用动态路由进行动态的更新后面的参数..
Vue语法出现无限更新循环的问题解决[Vue warn]: You may have an infinite update loop in a component render function.
weixin_46820017的博客
12-30 3803
在编写代码运行项目的时候出现这个组件渲染函数中可能有无限更新循环。 You may have an infinite update loop in a component render function. 本人使用了计算属性computed的方法去判断三种状态的计算 出现的问题是我在getStatus（）这个方法里面通过三种状态的判断，当达到某种判断条件的时候 直接去改变了data()里面的alldisable这个属性 正确写法： let disable = this.disable if (date
深入理解Vue 的钩子函数
10-18
在组件的生命周期中，Vue 提供了一系列的钩子函数，这些钩子函数允许开发者在特定的生命周期阶段执行自定义逻辑。本文将深入探讨Vue的钩子函数，尤其是与Vue Router相关的导航守卫。 首先，我们来了解Vue组件的基本...
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
Vue.js 是一款流行的前端框架，它的核心特性之一就是丰富的生命周期钩子函数，这些钩子使得开发者可以在组件的不同阶段执行特定的逻辑。本文将深入探讨Vue的钩子函数，特别是路由导航守卫和`keep-alive`组件，以及...
Vue 2.0中生命周期与钩子函数的一些理解
08-30
在updated钩子函数中，DOM已经被重新渲染。在beforeDestroy钩子函数中，Vue 实例已经被销毁，但是DOM还没有被卸载。在destroyed钩子函数中，DOM已经被卸载。 二、钩子函数详解 钩子函数是Vue 2.0 中的一种特殊函数...
详解Vue源码学习之callHook钩子函数
12-02
Vue实例在不同的生命周期阶段，都调用了callHook方法。比如在实例初始化（_init）的时候调用callHook(vm, ‘beforeCreate’)和callHook(vm, ‘created’)。 这里的”beforeCreate”,”created”状态并非随意定义，...
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
11-20
因为mounted函数只会在html和模板渲染之后会加载一次，但是在子组件中只有第一次的数据显示是正常的，所以需要再增加一个updated函数，在更新之后就可以重新进行取值加载，完成数据的正常显示。 beforCreate（创建...
使用keep-alive时再次进入不调用created,updated的问题
weixin_43124082的博客
04-11 1808
使用keep-alive记住了状态 通过路由跳转并且携带了参数，之前this.$route.params.list卸载mounted中，第一次进入能够更新，但是后面再次进入就不会更新了。 借用别人的话 当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）...
vue 修改数据界面没有及时更新nextTick
weixin_30613343的博客
08-30 473
使用场景：有些时候，我们使用vue修改了一些数据，但是页面上的DOM还没有更新，这个时候我们就需要使用到nextTick。 vm.$nextTick( [callback] ) 说明： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例...
【Vue 开发实战】基础篇 # 8：如何触发组件的更新
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-07 1140
因为 name 不是响应式，info 对象才是响应式，b 没有被视图使用。"this.name 发生了变化，但是并没有触发子组件更新""this.info 发生了变化，但是并没有触发子组件更新""this.list 并没有发生变化，但是触发子组件更新""data.b 发生了变化，但是并没有催发组件更新""触发 PropsAndData updated"【Vue 开发实战】学习笔记。点击这个三个都没有触发组件更新。
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、付费专栏及课程。

余额充值