面试part1

1. react和vue的区别，react特性

react是单向数据流，数据是不可变的，vue是单页面应用，是双向数据流，数据是可变的；

react使用jsx语法，vue用vue语法；

react通过js来操作一切，还是用各自的处理方式，vue是把html，css，js组合到一起，用各自的处理方式；

react适合数据复杂的大型项目，vue体积小，适合小项目

 

2. git常用指令

创建分支：git branch gy

切换分支：git checkout gy

合并分支：git merge master

提交代码：git add 文件名

git commit -m '注释'

git push

合并

修改冲突

等等

 

3. 常用的脚手架工具有哪些，webpack和gulp的区别

webpack：是一个资源打包工具，Webpack更侧重于模块打包，支持commonjs等，可以打包图片，css，js等，是按需加载

Webpack有人也称之为模块打包机，由此也可以看出Webpack更侧重于模块打包。

Gulp侧重于前端开发的整个过程的控制管理，是对整个过程进行控制，通过task对整个开发过程进行构建

 

4. 跨域解决

1）cors加一个请求头

Access-Control-Allow-Origin

2）后台代理php

写一个php请求数据 ，前端获取php返回的内容

php中的方法file_get_contents('跨域路径')

echo file_get_contents('跨域路径');

3）jsonp

jsonp请求：原生 script请求 src=''

 

5. react父传子子传父

父传子，直接传，子用props接收，子传父：自定义事件

 

6. 浏览器兼容问题

1）不同浏览器的标签默认外补丁margin和内补丁padding不同

*{margin：0；padding：0}

2）react开发时，使用es6语法方便快捷，但是有的浏览器对es6的兼容不太友好，引入“babel-polyfill”模块将解决这个问题。

import "babel-polyfill";

3）块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）

在float标签样式控制中加入display:inline;

4）设置较小的高度标签（一般小于10px），在IE6，IE7，遨游中超出自己设置的高度

给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。

5）图片默认有间距

使用float为img布局

6） IE6中的列表li楼梯状bug

通常在li中的元素（比如a）设置了浮动float，但li本身不浮动。

ul li{float:left;}或者 ul li{display:inline;}

7）禁用IE默认的垂直滚动条

html{    overflow:auto; }

8）事件冒泡，取消节点默认行为

9）dom2兼容

 

7. react-router不兼容ie7，怎么办

 

8. 怎么创建react项目

npx create-react-app projectName

 

10. 定时器

setInterval()，setTimeout()

 

11.es6新特性

let和const声明变量不存在声明提升，只在该作用域有效

使用箭头函数，都是匿名函数，不存在arguments，this指向声明该函数的对象

数据的解构赋值

...展开运算符

 

12. react文件.jsx创建的四大步骤

引入import

constructor

render()

导出

 

13 闭包

能在函数外部调用函数内部的变量，变量不被污染

缺点就是大量的变量存储在内存中，会导致内存泄漏，系统卡顿

 

16. nodejs如果用老版本，后面出现版本更新迭代怎么办

使用 nvm 管理多版本 node

 

17. js数据基本类型

Number， String，Boolean ，undefined，NaN，Object

 

18. 平时查资料怎么去查

百度，掘金，菜鸟，CSDN，简书，git，网易课堂，慕课，w3c等

 

19. vue路由实现原理

hash模式和history模式

hash模式：在浏览器中符号 “#” 以及#后面的字符称之为hash，用window.location.hash读取；

特点：hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用，hash不会重新加载页面。

history模式：history 采用HTML5的新特性；且提供了两个新方法：pushState（）、replaceState（）可以对浏览器历史纪录栈进行修改，以及popState事件监听到状态变更。

 

20. vuex

是vue的一个仓库，如果有两个组件之间需要访问同一状态，但是这两个组件之间没有关系，就需要找到顶层父组件，一层一层往下找，特别麻烦，用vuex的话就能在任何地方访问该数据

只要来读取的状态集中放在store中；改变状态的方式就是提交mutations。这是个同步的实物；异步逻辑应该封装中action中。

在main.js引入store，注入。新建一个目录store，...export。

场景有： 单页面应用，组件之间的状态，音乐播放，登录状态，加入购物车

 

21. 离线文件存储

 

22. 接口安全性 数据安全性

 

24. vue可以代替jQuery吗

vue的目的不是取代jQuery，他是为了解决前后端分离而出现的，jQuery主要是读dom的操作，如果没有数据变化，只是单纯的样式变化，没有必要大费周章去进行视图模型绑定，还不利于优化

vue的用途在于视图和数据的绑定，jQuery则侧重异步请求和动画效果

 

25. 混合开发有做过吗

 

26. 小程序的视频是一遍缓存一边播放的吗

 

27. token

 

28. 生命周期

 

29. ajax原理

 

30. vue-router

 

31. this指向

 

32. http状态码

1xx：临时/信息响应

2xx：代表成功

3xx：重定向

4xx：客户端错误，资源不存在

5xx：服务器错误，后台错误

 

33.axios是什么，怎么用，什么情况下用到

 

34. vue优化，解决兼容

 

35. 项目中遇到了什么问题

1）tab切换

写完一个tab切换的组件，但是数据渲染的时候出现问题，当我页面加载完之后他不会立刻显示，当我切换到另一个tab下再切换回来才能显示

原因：渲染数据写在了mounted中，应该在updata函数中也将内容添加到tab里

2）font字体图标不兼容ie

用expression函数

.fa-external-link {   *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = ''); }

3）jQuery更改DOM属性,比如元素的checked, selected, 或 disabled状态，请使用.prop()方法。attr()不能实现

4）js文件放在head标签中，结果js功能时候出现问题

原因：浏览器是自顶向下加载的，找不到绑定事件的节点，就会报错，要把js放在底部加载，就不会出现问题

5）用ajax渲染数据写swiper的时候，swiper出不来，

原因：还没有将swiper加载到页面中就已经调用完了轮播函数，要在讲轮播图插入成功值调用轮播函数就可以了

 

36. react的构造器是必须的吗？什么时候不需要

不是必须的，当没有数据的时候是不需要的

 

37. react路由结构能看懂吗

Switch用来包含一个或多个route，最终只显示其中一个route

react有两个核心的api，HashRouter和BrowserRouter

HashRouter有#，BrowserRouter没有#

 

38. react的语法

jsx语法

 

39. react组件里面都有什么东西（同41题）

import React, { Component } from 'react'; class App extends Component { render() { return <h1>你好/h1> } }

 

40. react构造函数写数据

constructor写super，this.state={}

constructor(props) { super(); // ? 我们忘了传入 props console.log(props); // ✅ {} console.log(this.props); // ? undefined }

 

41. react的组件的四大组成

引入import

constructor

render()

导出

 

43. package.json

定义了这个项目所需要的各种模块，以及项目的配置信息

 

44. react路由实现方式

DOM跳转：

1）在路由配置文件中配置路由

<Router path="mine" compontent={Mine}></Router>

2）在需要跳转的页面引入 import {Link} from 'react-router-dom'

3）使用link标签进行跳转

js跳转：

使用this.props.history.push('路径')

 

45. ajax解决什么问题

异步处理

 

46. react路由传参

params传参：

1）在路由配置的path后面加/:id

2）在路径后面将参数接上/:id

3）读取：this.props.match.params.id接收

query传参

1）在router文件中配置为正常配置

2）在跳转时 路径为一个对象{} 其中 pathname为路径 query为一个对象 对象里是携带的参数

this.props.history.push({pathname:'/路径',query:{name:'liusu'}})

3）this.props.location.query接收参数

state传参

1）跳转时

<Link to={{pathname:'/id',state:{name:'liusu'}}}></>

2）this.props.location.state接受参数

 

47. dom和虚拟dom区别

 

48. js三部分组成

DOM BOM ECMAScript（js语言标准）

 

50. react加载原理，为什么react加载这么快

 

51. === 和 ==的区别

==先转换数据类型再比较值

===直接比较

===会判断数据类型，==只判断值

 

53. 一个页面从输入一个地址到出现数据都发生了什么

1、浏览器地址栏输入url

2、浏览器会先查看浏览器缓存--系统缓存--路由缓存，如有存在缓存，就直接显示。如果没有，接着第三步

3、域名解析（DNS）获取相应的ip

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手

5、握手成功，浏览器向服务器发送http请求，请求数据包

6、服务器请求数据，将数据返回到浏览器

7、浏览器接收响应，读取页面内容，解析html源码，生成DOm树

8、解析css样式、浏览器渲染，js交互

 

54. ajax如何解析json文件

JSON.parse()

 

55. ajax常用的接口（api），比如（get，post），get和post的区别

1）get提交数据不安全，信息会在 地址栏显示，post相对安全

2）get提交的数据有限制，最大为2kb，post理论上数据没有限制

 

56. ajax谷歌和ie有什么区别

 

57. 原生js写swiper

 

59. 原生ajax

var btn=document.getElementById('btn');
//创建对象
var xhr=new XMLHttpRequest();
//准备发送请求
xhr.open('get','arr.json',true);
//发送请求
xhr.send();
//成功回调函数
xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
        console.log(JSON.parse(xhr.responseText));
    }
}