订单列表组件相关笔记

订单列表组件相关笔记

一.调整Order父组件结构：
在刚开始讲order父组件结构的时候，我们发现orderlist orderpay orderconfirm等子组件 都有orderheader组件作为头部，，只是内容不同我们当时觉得在order父组件进行封装，由于路由的不同进行内容修改很棒
封装方法如下：

但是我们发现一个问题：
mounted生命周期，只有在第一次加载渲染页面时，才会触发。当我们从订单确认组件跳转到订单列表的时候，不会触发mounted生命周期，会导致订单列表的orderheader组件的内容还是订单确认的，只有重新刷新页面，才会重新渲染数据。
所以，这种方法不可行，需要orderlist orderpay orderconfirm每个子组件，单独插入orderheader组件，单独传值。

二.数据渲染：
1》注意两层循环嵌套：

2》再次复习 vue-router传参方式：
vue-router传参方式

同时注意后端把我们要引用的图片放到了cdn上面，为什么呢？
cdn是一款加速服务器，把图片缓存到服务器上面，前端加载速度非常得快，加速的原因：
①. 服务器里面已经把这个图片缓存下来了，用户拉取很快
②.分摊了带宽，若把图片都放在了自己服务器上面，自己服务器的带宽拉得很高，若把图片放到另外一台服务器上就会分流，分摊带宽。

三.loading和 Nodata优化：

1》loading优化：
在之前支付宝支付的时候已经创建过loading，这个组件就是在接口调用渲染数据之前，先懒加载一个图片，当接口调用