vue实践总结

最新推荐文章于 2023-12-27 10:30:16 发布

原创最新推荐文章于 2023-12-27 10:30:16 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文分享了提升前端开发效率的多个要点：1.使用浅拷贝避免深拷贝开销；2.推荐使用对象存储数据；3.利用sessionStorage结合Vuex监听数据变化；4.安装依赖前检查路径；5.直接在Vuex中处理sessionStorage；6.注意this指针问题；7.使用toRefs确保响应式；8.利用逻辑运算符简化条件判断；9.运用vant的toast进行提示；10.使用CSS解决元素间距问题；11.通过line-height调整行高；12.格式化日期和获取时间戳的方法；13.阻止事件传播；14.处理元素边框问题。

1.浅拷贝：this.showArr=this.arr.slice(0)
2.数据多用对象{}
3.数据存储sessionStorage.get() ,可以用watch，监听到数据变化就存数据
4.下载项目之后，记得看路径是否正确再npm install //换路径 cd
5.通过vuex做监听，可以在add的时候直接sessionStorage.setItem() 在store.js文件中赋值，就不用取到home里面mounted（）触发函数add
6.注意拿到数据之后赋值的时候，this指向
7.reactive定义响应式数据const hamo=reactive({name:‘hamo’})之后，再通过…结构，就不具备响应性，可以用torefs( hamo)就具备响应性直接name就可以访问
8.多个判断的时候，可以设置变量 flag=…&&… 然后if（flag)
9.弹窗提示信息可以用vant 的toast
10…tag+.tag{margin-left:8px;}这样可以给除了第一个tag后面的tag加margin;
11.line-height:16px; 设置行高，与上一行元素的距离；
12.格式化日期格式dayjs dayjs(new Date()).format(‘YYYY-MM-DD’) 获取时间戳：newDate().getTime()
13. @click.stop(）防止事件传播
14. 最后一个大部分没有border: &:nth-last-child(1){ border-bottom:1px solid transparnt;}