使用Vue的时候记录一个教训

最新推荐文章于 2024-04-11 16:22:59 发布
最新推荐文章于 2024-04-11 16:22:59 发布
阅读量881 收藏
点赞数 1
分类专栏： Vue 文章标签： vue vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011866450/article/details/104869560
版权

 

如下：

global是全局变量

global.showdata是父列表的绑定数据分配给子组件

如 在子组件中修改 global.showdata[index].likes = likes

导致父组件重新渲染 又一次的分配数据给子组件 这要就形成了一个死循环 就会导致如下错误

VM608:1 [Vue warn]: Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in pages/showvideo/showvideo)
console.error @ VM608:1
warn @ mp.runtime.esm.js:613
warnNonPresent @ mp.runtime.esm.js:2026
get @ mp.runtime.esm.js:2080
cloneWithData @ mp.runtime.esm.js:5615
patch @ mp.runtime.esm.js:5628
Vue._update @ mp.runtime.esm.js:3965
updateComponent @ mp.runtime.esm.js:5696
get @ mp.runtime.esm.js:4425
run @ mp.runtime.esm.js:4501
flushSchedulerQueue @ mp.runtime.esm.js:4257
(anonymous) @ mp.runtime.esm.js:1990
flushCallbacks @ mp.runtime.esm.js:1919
Promise.then (async)
timerFunc @ mp.runtime.esm.js:1945
nextTick @ mp.runtime.esm.js:2001
queueWatcher @ mp.runtime.esm.js:4348
update @ mp.runtime.esm.js:4490
notify @ mp.runtime.esm.js:736
reactiveSetter @ mp.runtime.esm.js:1070
proxySetter @ mp.runtime.esm.js:4577
success @ videoitem.vue:280
success @ util.js:152
o.(anonymous function) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
C @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
i.emit @ VM624 WAService.js:1
Ci @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
n @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
t.emit @ VM622 asdebug.js:1
callback @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
setTimeout (async)
setTimeout @ VM624 WAService.js:1
a @ VM622 asdebug.js:1
t @ VM622 asdebug.js:1
S.onreadystatechange @ VM622 asdebug.js:1
XMLHttpRequest.send (async)
v @ VM622 asdebug.js:1
createRequestTask @ VM622 asdebug.js:1
n @ VM622 asdebug.js:1
invoke @ VM624 WAService.js:1
i @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
Oi @ VM624 WAService.js:1
a @ VM624 WAService.js:1
n @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
p.(anonymous function) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
invokeApi @ index.js:217
promiseApi @ index.js:275
global.netagent @ util.js:141
likefun @ videoitem.vue:263
videoclickfun @ videoitem.vue:156
(anonymous) @ index.js:1120
(anonymous) @ index.js:1087
handleEvent @ index.js:1077
r.safeCallback @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
r @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
n @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
_ws.onmessage @ VM622 asdebug.js:1
Show 33 more frames
VM608:1 TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at cloneWithData (mp.runtime.esm.js:5615)
    at VueComponent.patch [as __patch__] (mp.runtime.esm.js:5628)
    at VueComponent.Vue._update (mp.runtime.esm.js:3965)
    at VueComponent.updateComponent (mp.runtime.esm.js:5696)
    at Watcher.get (mp.runtime.esm.js:4425)
    at Watcher.run (mp.runtime.esm.js:4501)
    at flushSchedulerQueue (mp.runtime.esm.js:4257)
    at Array.<anonymous> (mp.runtime.esm.js:1990)
    at flushCallbacks (mp.runtime.esm.js:1919)
console.error @ VM608:1
patch @ mp.runtime.esm.js:5630
Vue._update @ mp.runtime.esm.js:3965
updateComponent @ mp.runtime.esm.js:5696
get @ mp.runtime.esm.js:4425
run @ mp.runtime.esm.js:4501
flushSchedulerQueue @ mp.runtime.esm.js:4257
(anonymous) @ mp.runtime.esm.js:1990
flushCallbacks @ mp.runtime.esm.js:1919
Promise.then (async)
timerFunc @ mp.runtime.esm.js:1945
nextTick @ mp.runtime.esm.js:2001
queueWatcher @ mp.runtime.esm.js:4348
update @ mp.runtime.esm.js:4490
notify @ mp.runtime.esm.js:736
reactiveSetter @ mp.runtime.esm.js:1070
proxySetter @ mp.runtime.esm.js:4577
success @ videoitem.vue:280
success @ util.js:152
o.(anonymous function) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
C @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
i.emit @ VM624 WAService.js:1
Ci @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
n @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
t.emit @ VM622 asdebug.js:1
callback @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
setTimeout (async)
setTimeout @ VM624 WAService.js:1
a @ VM622 asdebug.js:1
t @ VM622 asdebug.js:1
S.onreadystatechange @ VM622 asdebug.js:1
XMLHttpRequest.send (async)
v @ VM622 asdebug.js:1
createRequestTask @ VM622 asdebug.js:1
n @ VM622 asdebug.js:1
invoke @ VM624 WAService.js:1
i @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
Oi @ VM624 WAService.js:1
a @ VM624 WAService.js:1
n @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
p.(anonymous function) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
invokeApi @ index.js:217
promiseApi @ index.js:275
global.netagent @ util.js:141
likefun @ videoitem.vue:263
videoclickfun @ videoitem.vue:156
(anonymous) @ index.js:1120
(anonymous) @ index.js:1087
handleEvent @ index.js:1077
r.safeCallback @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
r @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
(anonymous) @ VM624 WAService.js:1
n @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
(anonymous) @ VM622 asdebug.js:1
_ws.onmessage @ VM622 asdebug.js:1
Show 33 more frames

解决办法就是把分配给子组件的值重新序列化一遍 给 global.showdata[index] 这要就会丢掉和父的绑定关系 然后在回到父列表时 this.$forceUpdate() 就可以了

爱写代码的老张
关注
专栏目录
记录paython selenium 测试vue的单选框的一次踩坑（明明单击已经成功了，但是调试脚本时页面不展示出来）
u013882336的博客
02-26 983
先说踩坑的教训：vue框架因为页面代码会实时改变，不要通过运行代码时弹出的浏览器判断是否成功，尤其是涉及到页面代码实时变化的部分，可以通过get_arrtibute方法输出一下看看 上图就是要测试的单选框，下图就是对应的页面代码 可以看到，现在“展示”按钮已经被选中了，对应的页面代码中第一条红线标出的元素，这里的class值是el-radio is-checked。然后隐藏按钮没有被选中，第二条红线标出来的代码中class的值是el-radio，明显能看出来这里是选中的class里面有is-check（
使用Vue.js 2.0搭建单页应用：从构建到部署
热门推荐
mikelkl的博客
10-12 2万+
入门请参考这篇文章：Vue构建单页应用最佳实战 在此记录下在我使用Vue.js 2.0开发较大型的单页应用时遇到的困难。写文章不容易，如果这篇文章对你有帮助，请给我的github仓库加个star~ github项目地址项目结构. ├── build/ # webpack config files │ └── ... ├── config/
Vue flushCallbacks报错解决方式----小记
nrsc
02-28 6575
问题描述 //根据过渡期合同号获得合同基本信息+政策 getAndSetPolicies(param) { //根据过渡期合同号查询后端 this.$api.getPeriodContractInfo(param).then(res =&amp;amp;gt; { //为查到的合同基本信息赋值 this.setBaseInfoByPeriodContractNum(res.respon...
Vue生命周期相关实例方法源码分析（二）
weixin_43916777的博客
02-23 227
vm.$nextTick 这个API的作用是将当前任务的回调压到下一次事件循环的队列中去。 function nextTick (cb, ctx) { var _resolve; callbacks.push(function () { if (cb) { try { cb.call(ctx); } catch (e) { handleError(e, ctx, 'nextTick');
Vue源码学习之nextTick
认定的总要想办法去完成。
06-23 1100
 对于nextTick相信大家都并不陌生，那么nextTick的本质是对JS事件循环的一种应用。那么相信大家都遇到过这种情况，比如说我们对DOM1进行操作并改变DOM1中的数据，下面使用一个变量去获取DOM1中的数据，发现获取到的数据是DOM1变化之前的数据，这就是我们会产生疑惑的地方。 这是因为Vue对Dom的更新是异步的，异步是代表着当被处理数据是动态变化时，此时对应的Dom未能同步更新就会导致数据已经更新(Model层的数据已经更新)，但是视图层并没有更新(Dom未进行更新)。此时我们可以通过使用ne
vue 项目中大量的flushCallbacks 原因分析
japlus的博客
04-11 507
setup 中定义了 const data = shallowRef()代码中多次更改了这 data.value = [xxx] 导致。
旅游APP软件使用Vue.zip
09-24
3. **总结报告**：这是对整个开发过程的总结，通常包括项目背景、开发过程、遇到的问题及解决方法、最终成果、经验教训等内容，是项目经验的宝贵记录。 4. **原型图**：使用工具（如Axure、Sketch或Figma）绘制的...
vue+springboot前后端分离实现单点登录跨域问题解决方法
01-19
最近在做一个后台管理系统，前端是用时下火热的vue.js，后台是基于springboot的。因为后台系统没有登录功能，但是公司要求统一登录，登录认证统一使用.net项目组的认证系统。那就意味着做单点登录咯，至于不知道什么...
基于Vue+Webpack+ElementUI+nodejs 实现的考勤系统
最新发布
07-12
根据给定文件的信息，我们可以提炼出以下几个主要的知识点： ### 一、工作述职报告PPT模板的基本结构 #### 1. 工作总结规划（Part 01） - **定义与目的**：这部分旨在总结过去一段时间内的工作成果，并对未来的...
vue源码分析-响应式系统(三)
yyzzabc123的博客
10-17 446
上一节，我们深入分析了以为数据创建响应式系统的过程，并对其中依赖收集和派发更新的过程进行了详细的分析。然而在使用和分析过程中依然存在或多或少的问题，这一节我们将针对这些问题展开分析，最后我们也会分析一下watch的响应式过程。这篇文章将作为响应式系统分析的完结篇。
关于return Promise.resolve()的理解
weixin_44082001的博客
12-11 978
Promise.resolve().then(() => { console.log(0); return Promise.resolve(4) }).then(res => { console.log(res); })
Vue报错之 [Vue warn]: Property or method "list" is not defined on the instance
ZHXT__的博客
09-01 1万+
如图: 我的过来发现了是自己下开始写了个list 数组,后面由于加了个s, 而使用时 还是用了 {{list}}, 所以出现了这个问题, 主要还是命名这个东西,想好了就别改了, 后面突然想改的话,可能引发一系列的错误, 如果要改,可以先ctrl+f找找,重名的做好一改全改的准备 ...
Vue进阶面试必问，异步更新机制和nextTick原理
前端下午茶
09-16 1061
vue已是目前国内前端web端三分天下之一，同时也作为本人主要技术栈之一，在日常使用中知其然也好奇着所以然，另外最近的社区涌现了一大票vue源码阅读类的文章，在下借这个机会从大家的文章和...
Vue番外篇 -- vue.nextTick()浅析
weixin_34034261的博客
10-20 466
当我们在vue的beforeCreate和created生命周期发送ajax到后台，数据返回的时候发现DOM节点还未生成无法操作节点，那要怎么办呢？ 这时，我们就会用到一个方法是this.$nextTick（相信你也用过）。 nextTick是全局vue的一个函数，在vue系统中，用于处理dom更新的操作。vue里面有一个watcher，用于观察数据的变化，然后更新dom，vue里面并不是每次数据...
巧用while(true){ }死循环的一个小例子
nrsc
06-21 2万+
package cn.itcast.zuoye_GuanQia2_day03;/* * 请按如下要求编写程序,打印菜单: 1.从键盘上录入一个1到5的数字; 2.当数字为1时打印菜单”新建”; 当数字为2时打印菜单”打开文件”; 当数字为3时打印菜单”保存”; 当数字为4时打印菜单”刷新”;
Vue.js 内部运行机制（六）---- 批量异步更新策略及 nextTick 原理
你的博客
08-08 2544
之前我们学到了 Vue 更新数据是如何更新视图的。 简单回顾 数据更新（setter）-&gt; 通知依赖收集集合（Dep） -&gt; 调用所有观察者（Watcher） -&gt; 比对节点树（patch） -&gt; 视图 在更新视图这一步，使用异步更新策略 为什么呢？引用小册中的例子,下面有一个这样的 Vue 组件 &lt;template&gt; &lt;div&gt; ...
Vue源码解析之nextTick
weixin_30642561的博客
11-22 88
Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能，在Vue内部实现中也经常用到nextTick。但是，很多新手不理解nextTick的原理，甚至不清楚nextTick的作用。 那么，我们就先来看看nextTick是什么。 nextTick功能 看看官方文档的描述： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 再...
使用vue写一个聊天界面
04-05
在 JavaScript 文件中，你需要引入 Vue 库，并创建一个 Vue 实例。 在 Vue 实例中，你需要定义一些数据和方法，比如： - 聊天记录，可以用一个数组来存储每条聊天信息。 - 发送消息的方法，在用户输入消息并提交...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值