vue 优化代码的总结

之前写代码也没人教，现在我写的代码组长有时候会review,并且会提出怎样优化代码，之前写页面也没有很明确的组件化思想，目前这一方面有了很大的提升
下面就说一下近期的总结：

1. 写自定义组件时，尽量做到复用，不要在组件里面写循环
2. 给组件传值，不要传数组，尽量以Object的形式进行传值，可以在组件上v-for数组，然后传item
3. 子路由的页面，都可以通过props接收由父路由传递的值
4. 利用v-for循环数组时，绑定唯一标识时，尽量不要用index
5. 组件要多多利用slot,可以低耦合，提高组件的利用率
6. img标签只能显示图片，视频用video标签
7. 利用img标签v-bind:src静态资源时，要利用require 去请求资源
8. 在mouted或者是created写方法时，要注意可能存在异步，获取数据的先后顺序可能会造成问题
9. 在图像app中，图片是不能变形的，之前的经验有宽度100%，高度自适应auto,或者高度100%，宽度自适应，影像商城中学习到宽高100%，另外设object-fit: cover;解决图片变形问题，缺点图片不能完整显示，但是能兼容各大浏览器
10. 每写完一个页面，就把无用的注释和调试代码删除，否则可能会忘掉
11. 使用vue的过程中，应该尽量不直接操作dom，应该使用vue中的ref 来获取元素
12. 尽量不要在公共组件里直接修改代码，如果多个地方使用该公共组件和其他内容组成的部分，可以再次封装一个新的组件使用
13. 点击事件，如果点击区域不在目标区域，进行的逻辑操作：
document.addEventListener(‘click’,e=>{
let markColor = document.getElementById(‘markColor’)
if(!markColor.contains(e.target)){
this.showColor=false //这句话的意思是点击其他区域关闭（也可以根据自己需求写触发事件）
}
})

以后会继续总结
加油，祝你一天好心情！！！