招银网络前端一二面面经

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

key能够大大减少对页面的DOM操作，提高了diff效率

当 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

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+ 对应配置规则里的域名的方式。(网上搜的)