前端Vue小项目的一个非常诡异离谱的"眼神不好"Bug

简介: 公司放假, 现在来提升自己的前端的技术, 想着使用饿了么UI搭建一个简单的页面, 并完成mock数据的获取, 一个小项目就好了....

发现data的form里面的对象的属性少了一个id, 但我已经强行写了2个需求了...然后开始重构代码, 在所有用到form数据的地方加上id属性.

很快发现了不对劲....就是最简单的修改对话框的结构, 但是发现页面没有一点改变. 被这诡异的一幕惊呆了, 但由于这是前端又不知道怎么找Bug, 于是乎全表扫描找bug....扫了半天, 什么新增的对话框的输入内容校验、什么新加的内容都没有用。 找了大概有30分钟,真的很诡异。

最后是在受不了就把对话框的一个元素删了, 把校验也删了。 发现原页面还是之前的不变!

最后把一切都删了, 竟然Web前端还在运行 !

再后来觉得一定是缓存的问题了, 然后去掘金搜如何在vsCode清理缓存, 结果停止项目Web就失效, 开启项目Web它还是十几分钟之前的原始代码...


最后最后终于发现是写错位置在别的组件上了。。。


小结:

我的前端即使会搭建简单的环境, 即使现在能够勉强做前端和后端增删改查的操作, 错了就去看笔记"全表扫描"找Bug. 但是这样找bug真的非常浪费时间, 还是要学会找前端的bug才行.

相关文章
|
4天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
24 5
|
7天前
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
|
4天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
23 6
|
1天前
|
JSON JavaScript 前端开发
前端框架vue的样式操作,以及vue提供的属性功能应用实战
前端框架vue的样式操作,以及vue提供的属性功能应用实战
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)
|
1天前
|
JavaScript 前端开发 Python
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(一)
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(一)
|
1天前
|
开发框架 缓存 前端开发
|
1天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
4天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
15 7
|
4天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
13 3