前端开发实习记录

该记录是我11月份开始实习遇到的问题。

1. 在一个子组件里面父子通信，子组件绑定的是父组件里面接口请求的数据，但是子组件里面父组件传过来的值为空。原因：dom渲染的速度比请求数据的速度快。解决方法：用v-if解决，一开始设置为false，后面当请求完成数据后改为true。

2.filter与computed的不同，filter可以传参数，computed无法传参数，它本身就是一个参数。

3.forEach 无法在所有元素都传递给调用的函数之前终止遍历 / 在forEach方法里 return 无效，解决方法：定义一个变量，把我想返回的值保存下来，最后返回出去 （最佳方法待补充）。

4.修改ant框架里面的a-table，a-table原来的话只能复选，但是今天的需求是单选。解决方法：在每次选择事件的时候清空selectionRowkeys里面的值，然后再重新赋值一遍。

5.数据中心里面的上传文件，一般来说这种上传文件调用接口的时候params不能使用普通的对象，而是要用formData，用appendChild方法添加键值对。

6.

        let str = '6145390195186705543'

        console.log(str * 1)                //  6145390195186705000

        console.log(parseInt(str))        //  6145390195186705000

js 的最大位数是16位，大于16位的数字精度会丢失，可以用内置方法bigint来解决，bigint(str) + bigint(1)。

7.用webpack自带的proxy代理解决了跨域问题，步骤：创建一个vue.config.js文件，devServer的proxy里面自定义一个'api'对象，target：'http: //xxx.xxx.xxxx',然后在request里面的baseUrl里面写api。

8.slider里面的item数量过多显示不出来，要是设置左对齐的话当item数量比较少的时候不居中不美观。解决方法：在slider绑定一个动态的class：｛'active': isAicive｝,这个acitive类是设置居中的，当item的数量大于10的时候将isActive设置成false，小于10的时候将isActive设置成true。

9.一个子组件绑定了父组件的一个对象，当触发手动颁发方法的时候往这个对象里面加东西，子组件里面用watch监听，子组件是一个表单，其中有一个是日期表单，日期表单绑定了传过来的日期，给的要求是默认是传过来的日期但是也可以更改，但这样子写怎么也更改不了。原因：在watch里面子组件是拿到了父组件传过来的值，但是这个值是浅拷贝，vue里面的数据是单向的，子组件不能修改来自父组件的值。解决方法：在wacth里面赋值时深拷贝，jason.stringfy，jason.parse。