这是一个踩坑要点集合 (个人意见) 大家有什么好的问题也可以提出来一起学习
Vue的HTML要点
- 如果可能尽量使用
v-if和v-for尽量不要使用js控制DOM - 需要对你的
DOM块进行注释
Vue的css要点
- 因为是使用
css-loader的原因所以需要像上图一样来对DOM进行命名 - 对css定义则需要
- 因为项目需要所以可能要对
elementUI的css进行重写所以我们一定要在即将修改的UI组件最外层添加一个div并命名一个唯一id写法就是以下写法 如果不定义会对整个项目的页面进行污染 - 对于一个常用的类名要用:class=['$style.xxx', 'xxx']命名 不可以将类名写成两个会报错。
- 对于公共css可以
写在一个公共css上面 不要 在各个页面上面写单独的css
尽量不要这样写 即使这样写了 也要避免复用 - 可以学习使用grid 也可以使用flex 尽量不要用float
Vue的js要点
- methods 下面是用来写函数的
- mounted 是在页面渲染之后执行的函数
最好是将函数放在$nextTick之中 具体详情可以去查看Vue官方文档或者百度搜索
- 如果遇到if过多的问题要灵活使用|| && 或者更换判断语句
- 对于嵌套循环 尽量使用break 和 内大外小原则 这样可以减少运算时间并减轻浏览器内存压力 防止溢出
- 对于Pormise一定要重视 能用的地方尽量使用 避免出现回调地狱
- async await的使用可以减少 setTimeout的使用
- 对于重复获取在项目紧急的情况下可以使用定时器但是在时间充裕的情况下 可以使用长连接
Vue 组件的数据传递问题
- 最好是用
vuex因为公司框架使用的是非严格模式所以数据的跨组件传递十分方便，由下图可以学习 a. 首先你需要在页面中使用vuex的辅助函数b. 在
store.js中建立一个变量 比如c. 然后在函数中或者
DOM中调用或者赋值 用=即可 注意数组和对象不能这样赋值 具体可以查看Vue官方文档注意：如果你直接在
store.js中定义变量则不需要State后面的属性 可以直接写this.State.变量名字 - 注意：Cesiumde 数据不可以放在
vuex中 会导致页面卡顿是任何数据 - 简单的父子传值等可以查询Vue文档或者查看其他的项目代码
- 监控
vuex的数据变化 可以用watch来监听 具体代码如下图所示 - 对于组件运用应该避免重复造轮子 可以在开会或者技术交流时 对各个项目的轮子进行一个总结
- 对于他人造的页面或者轮子 尽量别不要修改 一旦修改应通知轮子作者
- 组件的诞生是避免重复运动 在造轮后需要和所在项目成员说明并将注释写好
- 对于出现两次以上包含两次的相同场景就应该考虑去将场景组件化
Vue的弹窗管理和异步接口(TS)
使用并阅读TS基础语句 不会使用就用从any开始不过要尽量避免
弹窗管理
- 灵活使用TS或者vuex
将所有的弹窗控制写在同一个文件中 每次调用之前将其他弹窗关闭 可以参考智慧工地的app和策划规划项目
异步请求管理
- 对于异步请求可以根据业务不同让在不同的页面但是一定要有同一的存放地址 不可将异步请求放在自己的业务页面中
在请求的前面写好参数类型 并将数据处理写在请求中 让业务页面的代码量尽量减少 - 灵活运用 接口(interface)
对传入的参数进行进一步的类型筛选 - 如果可以尽量使用 TS
这是前端发展趋势 包括 Vue3.0 希望大家课余时间可以自学TS
