【2019/09/18】前端面试

STX前端面试：

一、react 与 vue的 区别

• 1）设计理念上的区别：Vue使用的是可变数据，而React更强调数据的不可变。因此应该说没有好坏之分，Vue更加简单，而React构建大型应用的时候更加棒
• 2）数据流的不一样：

  

  Vue2.x 已经不鼓励组件对本身的 props 进行任何修改了。 因此如今咱们只有 组件 <--> DOM 之间的双向绑定这一种。 React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。
• 3）组件通讯的区别：

  

在Vue 中有三种方式能够实现组件通讯：

• 父组件经过 props 向子组件传递数据或者回调，虽然能够传递回调，可是咱们通常只传数据，而 经过 事件的机制来处理子组件向父组件的通讯
• 子组件经过事件向父组件发送消息
• 经过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据，能够跨越多个层级。

在 React 中，也有对应的三种方式：

• 父组件经过 props 能够向子组件传递数据或者回调

• 能够经过 context 进行跨层级的通讯，这其实和provide/inject 起到的做用差很少。 能够看到，React自己并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，并且Vue更倾向于使用事件。可是在 React 中咱们都是使用回调函数的，这多是他们两者最大的区别。

• 4）模板渲染方式的不一样：

  • React 是经过JSX渲染模板
  • Vue是经过一种拓展的HTML语法进行渲染
  • 但其实这只是表面现象，毕竟React并没必要须依赖JSX。在深层上，模板的原理不一样，这才是他们的本质区别：
  • React是在组件JS代码中，经过原生JS实现模板中的常见语法，好比插值，条件，循环等，都是经过JS语法实现的
  • Vue是在和组件JS代码分离的单独的模板中，经过指令来实现的，好比条件语句就须要 v-if 来实现

二、讲讲axios

Axios的特色

• 从浏览器中建立 XMLHttpRequests
• 从 node.js 建立 http 请求
• 支持 Promise API
• 拦截请求和响应 （就是有interceptor）
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防护 XSRF

基本用法

//执行get请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  }).then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });
复制代码

三、如今有一个ul，里面有四个li，给里面的li元素for循环，每一个绑定一个onclick事件，push一个li，这个push的li有没有绑定事件

没有

四、响应式布局如何作及rem原理

rem是根元素字体的单位，好比 html{font-size:16px;} ，1rem至关于16px

经过修改根节点的font-size大小，实现等比例缩放

一、给根元素设置字体大小，并在body元素校订 - html{font-size:100px;} - body{font-size:14px;}

• 使用rem代替px，直接除100便可

.menu li{
	display: table-cell;
	padding: .1rem .3rem;/*至关于10px 30px*/
}
复制代码

二、绑定监听事件，dom加载后和尺寸变化时改变font-size

详细解析： juejin.im/post/5caaa2…

五、有一个大盒子，里面有一个小盒子，小盒子的宽高为100px，如何让小盒子在大盒子中间水平垂直居中

• 1）定位居中1

<style>
     *{
         margin: 0;
     }
     .one{ 
         position: relative; 
         width: 100%; 
         height: 500px; 
         background: #c5c5c5;
     }
     .two{ 
         position: absolute; 
         left: 50%; 
         top:50%; 
         margin-left: -100px; 
         margin-top: -100px; 
         background-color: #a00; 
         width: 200px; 
         height: 200px;  
     }
 </style>
 <div class="one">
     <div class="two"></div>
 </div>
复制代码

• 2）定位居中2

<style>
    *{
        margin: 0;
    }
    .one{ 
        position: relative; 
        width: 100%; 
        height: 500px; 
        background: #c5c5c5;
    }
    .two{ 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%,-50%);
        background-color: #a00; 
        width: 200px; 
        height: 200px;  
    }
</style>
<div class="one">
    <div class="two"></div>
</div>
复制代码

• 3）flex布局

<style>
   *{
        margin: 0;
    }
    .one{ 
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; 
        height: 500px; 
        background: #c5c5c5;
    }
    .two{  
        background-color: #a00; 
        width: 200px; 
        height: 200px;  
    }
</style>
<div class="one">
    <div class="two"></div>
</div>
复制代码

九、如何实现上拉加载

• scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增长，初始值是0，它是一个变化的值；
• clientHeight:它是一个定值，表示屏幕但是区域的高度；
• scrollHeight：页面不能滚动时是不存在的，body长度超过window时才会出现，所表示body全部元素的长度，

由上面的三个值所产生一个原理公式：

scrollTop + clientHeight >= scrollHeight

let clientHeight  = document.documentElement.clientHeight; //浏览器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;

let distance = 50;  //距离视窗还用50的时候，开始触发；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("到底了，开始加载数据");
}
复制代码

十、有一个大盒子，大盒子很大，想让上面一排有四个正方形，如何实现

blog.csdn.net/weixin_4184…

十一、跨域问题

juejin.im/post/5c2399…

十二、数组的方法

juejin.im/post/5cb878…

1三、自我学习的平台

1四、如何封装组件，封装组件会用到什么技术

1五、介绍js原型？什么时候会用使用到原型

juejin.im/post/5cbbc7…

关于react

react的传参方式如何传递，子传父如何传递

关于vue

一、什么时候使用vuex

二、关于vue的父子组件通讯，参数分别是什么

三、vue的生命周期

四、第一次页面加载会触发哪几个钩子

五、用swiper插件是会遇到哪些兼容问题，如何解决