招银网络前端一二面面经
1.自我介绍
2.所做的项目哪个更有挑战性，为什么
3.前端框架是react还是vue
4.父子组件通信的方式，除了props还有什么
- 通过 props 传递
- 通过 $emit 触发自定义事件
- 使用 ref
- EventBus
- $parent 或$root
- attrs 与 listeners
- Provide 与 Inject
- Vuex
5.父子组件的生命周期
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
6.key的作用，如果后端返回的值没有唯一标识，还可以用什么作为key，为什么index不能作为key
（1）当我们在使用v-for时，需要给单元加上key
-
如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
- 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
（2）用组件唯一的id（一般由后端返回）作为它的key，实在没有的情况下，可以在获取到列表的时候通过某种规则为它们创建一个key，并保证这个key在组件整个生命周期中都保持稳定。（网上看的）
（3）因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。
7.哪些操作不能做到响应式，比如数组的插入不是响应式，还有什么不是响应式？官方文档里应该有写
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。
对于对象：
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名 有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
对于数组：
Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
8.元素水平垂直居中的方式
- 利用定位+margin:auto
-
利用定位+margin:负值 ：父元素为相对定位， 子元素移动自身50%实现水平垂直居中
-
利用定位+transform：与上面一个一样只是利用transform走自身的50%
transform: translate(-50%,-50%);
-
table布局：设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中
-
flex布局：
-
display: flex时，表示该容器内部的元素将按照flex进行布局
-
align-items: center表示这些元素将相对于本容器水平居中
-
justify-content: center也是同样的道理垂直居中
-
-
grid布局：
display: grid; align-items:center; justify-content: center;
9.输入url到页面渲染的过程
- URL解析
- DNS 查询
- TCP 连接
- HTTP 请求
- 响应请求
- 页面渲染
10.客户端的跨域请求，服务器怎么判断是拒绝服务还是接受请求
浏览器先根据同源策略对前端页面和后台交互地址做匹配，若同源，则直接发送数据请求；若不同源，则发送跨域请求。
服务器解析程序收到浏览器跨域请求后，根据自身配置返回对应文件头。若未配置过任何允许跨域，则文件头里不包含Access-Control-Allow-origin字段，若配置过域名，则返回Access-Control-Allow-origin+ 对应配置规则里的域名的方式。(网上搜的)
服务器解析程序收到浏览器跨域请求后，根据自身配置返回对应文件头。若未配置过任何允许跨域，则文件头里不包含Access-Control-Allow-origin字段，若配置过域名，则返回Access-Control-Allow-origin+ 对应配置规则里的域名的方式。(网上搜的)
11.跨域的解决方式
JSONP CORS Proxy+Nginx
12，缓存机制，强缓存协商缓存具体的判定过程
强缓存：expires、cache-control
协商缓存：last-modified 、E-tag if-modified-since、if-none-match
补充一个：盒子模型，怪异盒是哪一个浏览器所特有的，ie所有的版本都是怪异盒吗？
标准盒模型下盒子的大小 = content + border + padding + margin
怪异盒模型下盒子的大小=width（content + border + padding） + margin
IE盒模型，它的元素width、height的值的计算方式包含了content、border和padding等属性的数值，也就是说它的基本宽高大小等于 content + padding + border。
W3C标准盒模型，它的元素width，height的计算方式只包含内容了content 这一个属性的数值，不包含 border 和 padding 元素。
ie8开始使用标准盒
13.手撕题：颜色16进制转rgb
没写完就说时间到了，明明我的面试也是迟到了十分钟才开始呜呜呜，让说了下大概思路，怎么验证输入是否合法，让我写了个大概的正则表达式
许愿进个二面 球球了ball ball
许愿成功，补一个二面的面经（有点记不住了）
1.自我介绍
2.echarts同时展示柱状图和折线图怎么做，具体的字段是哪些
3.成绩排名大概是多少
4.场景题，银行卡号-银行，怎么样快速地解析出是哪个银行
我说用map存，他问我数量级，把我问懵了，我就说是银行数量的多倍哈哈哈哈，完全没想到可以就6位数的排列组合的数量级 菜
5.代码题，表格内容列排序，根据输入选择对应的列，再根据关键字desc还是asc升序或者降序
（没调出来 菜菜菜 但是面试官说我思路没问题，许愿一个hr面吧，求求求求）
#招银网络科技面经#
类似资料：