STX前端面试:
1、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 来实现
2、讲讲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);
});
3、现在有一个ul,里面有四个li,给里面的li元素for循环,每个绑定一个onclick事件,push一个li,这个push的li有没有绑定事件
没有
4、响应式布局如何做及rem原理
rem是根元素字体的单位,比如 html{font-size:16px;} ,1rem相当于16px
通过修改根节点的font-size大小,实现等比例缩放
1、给根元素设置字体大小,并在body元素校正 - html{font-size:100px;} - body{font-size:14px;}
- 使用rem代替px,直接除100即可
.menu li{
display: table-cell;
padding: .1rem .3rem;/*相当于10px 30px*/
}
2、绑定监听事件,dom加载后和尺寸变化时改变font-size
详细解析: juejin.cn/post/684490…
5、有一个大盒子,里面有一个小盒子,小盒子的宽高为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>
9、如何实现上拉加载
- 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("到底了,开始加载数据");
}