实习日记 08 echart公司项目中的echart使用很方便，只需要把数据按照要求的格式输入进去就可以了。echart具体使用？首先把echarts绑定到了vue上，然后在需要获取echarts数据的部分大部分利用混入的形式给抽取了出来,使用的时候具体有两种方式，第一种是把数据传到子组件中生成样式，还有一种是通过mounted中document.getElementById("echartsBox")，然后对这个dom节点进行操作。 (echartsBox是包裹echarts图的div)

实习日记 07 min-width 和 max-width就字面意思，最小宽度和最大宽度，在区间内的宽度才会生效。可以是px，%，inherit如果是%的话，是相对于父元素大小的百分比。min-width设置后max-width会失效。Babel-polyfill首先解释babel，babel是js的解码器，因为js一直在发展，会有很多新的使用方式，babel就是能够把最新的语法向下兼容成低版本也能执行的代码。而polyfill指的是“用于实现浏览器不支持原生功能的代码”。例如fetch和Array.fromfastClick移动端的浏览器在触发点击事件的时候会有300ms的延迟，会等待300ms才触发点击事件。fastClick就是解决这个问题，原理是在检测到touched事件的时候，会通过dom自定义事件立即发送出来一个click事件，并把浏览器在300ms之后的click事件阻止掉。

实习日记 06 实现了一个页面，用到了图片和文字居中，echart，vant样式，所有的数据都是通过后端接口获得。学到了一个查看发送请求状态以及返回信息的方法，F12---network---Use large request rows难点1：服务器传过来的数据与echart需要的格式不同传过来的格式rows:[ { "aa.bb":123, "cc.dd":234, } ... ]需要的格式则是对象里有data1和data2两个数组，两个数组分别是传来数据的第一项和第二项data:{ data1: [], data2: [] }需要对传过来的数据进行处理let result = res.rows this.data.data1 = result.map((x) => x["aa.bb"]) this.data.data2 = result.map((x) => x["cc.dd"]) //传过来的数据第一项为空，所以又用了pop 之所以使用x["aa.bb"]格式，是因为传递过来的数据带. map():默认三个参数分别是value,index，arr难点2：前提是父组件中有A和B两个页面进行互相切换，A页面和B页面中的data有个数据名称是一样的，他们的数据都是从各自的接口获取的，从A页面跳往B页面，B页面中所显示的数据是A页面的，但是在B页面状态下刷新就是B页面的数据，最终解决办法将重名数据改名。解决方案一：监听$router,监听到router发生变化的时候this.reload()重新加载页面watch除了可以监听data，还可以监听props，$router,$emit,computed解决方案二：导航首位解决方案三：路由跳转的router-view中添加:key="$route.fullPath"，这个方案能够加载整个组件。难点3：修改子组件样式不一定非要在子组件内部修改，也可以在父组件中调用子组件的外部包裹一个div，然后利用穿透进行修改。解决这个问题的时候想到了nextTick(),后来发现不行，需要回顾一下nextTick的知识。知识点1：data中拿不到this，如果需要拿到this需要通过created中处理。

实习日记 05 任务：添加接口，修改某个页面的样式并通过接口把数据展示任务比较简单，但是看了发送请求相关的代码，觉得很有学习意义！之前个人项目发送请求用的是baseurl，而公司项目使用了webpack中的devServer，目前个人的理解的devServer相当于baseurl，但是能有很多个，同时也可以设置一些参数，公司在的项目使用到了changeOrigin: true。 能够把发送请求头中host会设置成target。目前不清楚作用重写了axios中的httpRequest，其中主要包括三部分内容ResponseHandler 这个函数目前不懂export class ResponseHandler { constructor() {} excute(response) { const { data, config: {url} } = response return Promise.resolve(data) } }定义了baseurl写了HttpRequest构造函数，默认参数有延时时间、baseUrl、成功响应过滤数组、失败响应过滤数组、以及对并发请求的一个计数器HttpRequest中，首先把原本axios的方法全部注入到HttpRequest中。 let {all, spread} = axios const enhancedAxios = Object.assign(this, {all, spread})HttpRequest中的方法有合并配置信息(其中有个参数指定了头部是否携带token)、重写post，get，put，delete(主要是对传递参数部分进行了重写)、各种响应的过滤(根据响应的成功或者失败进行处理，基本都用到了promise)、进度条的状态。之后又对请求头信息进行了更加详细的重写，包括微信登录时的判定、人脸识别判定等

实习日记 04 今日遇到的问题，修改vant样式一直失效，查询后知道可以使用scoped穿透进行覆盖。scoped？首先是需要在样式style的标签中添加scoped，当一个style有了scoped标签后，它的css样式就只运用于当前模块，能够样式模块化。scoped的原理？通过postCss实现，首先给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素。之后在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式scoped穿透？加了scoped属性后在需要覆盖的样式前加/deep/遇到问题二，在子组件中修改父组件传递过来的props的值仍旧是写组件遇到的问题，发现使用props传递过来的数据是双向的，子组件对数据进行改变父组件就能看到改变后的数据，而props是单向的，后续问过康哥后发现是自己太不规范了，不能通过这种方式去修改数据，如果需要修改props中的数据必须通过子组件传递信息给父组件，然后父组件中对数据进行修改。总结一下data和props的区别props是父组件将其数据传递的一种方式，而当我们从子组件中访问props数据的时候，其实并不拥有它，所以子组件不能对props中的数据进行修改。(修改数据可以成功，但是会很麻烦)data是当前组件本身私有的，仅供组件本身使用，其他组件不能访问。props和data都是响应式的数据，但是不能重名。感悟：如果要修改某个组件的数据，就要通知这个组件让他去修改，而不能擅自在组件中去直接修改其他组件的值。