Vue和React面试知识点

ES6新添加两个数据类型

1.数据类型Set集合：set常用于去重操作

2.数据类型Map：map可以避免键值必须为字符串的限制,其键值可以为对象、数组等

3.Symbol类型：在用相同的字符串对对象属性名或方法进行命名时会发生命名冲突，而使用symbol产生的名字是不同的

ES6新增的一些特性：

1）let声明变量和const声明常量，两个都有块级作用域

2）模板字符串
　　模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串

3）解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值

4）for of循环
for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串

5）import、export导入导出
ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使

6）... 展开运算符
　　可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

7）class 类的继承
　　ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

8）async、await
　　使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
　　async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

9）promise
　　Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

10）Proxy代理
　　使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

var、let、const之间的区别

var声明变量可以重复声明，而let不可以重复声明

var是不受限于块级的，而let是受限于块级

var会与window相映射（会挂一个属性），而let不与window相映射

var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错

const声明之后必须赋值，否则会报错

const定义不可变的量，改变了就会报错

const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

forEach、for in、for of三者区别

forEach更多的用来遍历数组

for in 一般常用来遍历对象或json

for of数组对象都可以遍历，遍历对象需要通过和Object.keys()

for in循环出的是key，for of循环出的是value

什么是Async/Await?

async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
async/await是基于Promise实现的，它不能用于普通的回调函数。
async/await与Promise一样，是非阻塞的。
async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

状态码

2XX 成功

200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
206 Partial Content，进行范围请求

3XX 重定向

301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法定向获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
307 temporary redirect，临时重定向，和302含义相同

4XX 客户端错误

400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源

5XX 服务器错误

500 internal sever error，表示服务器端在执行请求时发生了错误
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

html表单提交方式除了post 、get还有哪些

html表单提交method就是get、post请求两种。,但是从http动作的角度来看，除了get、post，还有delete、put等

前提：单页面和多页面的区别

每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

各数据的转换

1. 数组转字符串：.join() 将数组中所有元素放到一个字符串中，并用指定的分隔符进行分割

2. 字符串转数组：.split() 将字符串以指定的分隔符分割成数组

3.字符串转json对象：JSON.parse(jsonstr);

4.json对象转json字符串：JSON.stringify(jsonObj);

第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

一、对于MVVM的理解？

MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

二、VUE和react生命周期

VUE：

beforeCreate 已经完成实例
created Data已经完成
beforeMount data和模板已经生成还没有完成挂载
mounted data和虚拟DOM挂载完成
beforeUpdate
updated 数据更新，此钩子函数在服务器一开始渲染的时候不被调用
beforeDestroy 实例销毁
destroyed 实例销毁

react:

初始化阶段：
- getDefaultProps:获取实例的默认属性
- getInitialState:获取每个实例的初始化状态
- componentWillMount：组件即将被装载、渲染到页面上
- render:组件在这里生成虚拟的 DOM 节点
- componentDidMount:组件真正在被装载之后
运行中状态：
- componentWillReceiveProps:组件将要接收到属性的时候调用
- shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
- componentWillUpdate:组件即将更新不能修改属性和状态
- render:组件重新描绘
- componentDidUpdate:组件已经更新
销毁阶段：
- componentWillUnmount:组件即将销毁

二、Vue和react各自父子之间通信

VUE父子之间通信

父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数

react父子之间通信

父组件传给子组件：子组件通过props方法接受数据;
子组件向父组件通讯，同样也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中

三、vuex和redux讲解

vuex：只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中

state：存储状态（变量）
getters：计算state，我们在组件中使用 $sotre.getters.fun()
mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。
actions：异步操作。提交mutations，在组件中使用是$store.dispath('')
modules：模块化store

redux:管理状态，用户通过界面组件触发ActionCreator，携带Store中的旧State与Action 流向Reducer,Reducer返回新的state，这是同步，Reducer里面只能放纯函数

处理异步的需要中间件：redux-thunk或者redux-saga

redux-thunk

缺点：

(1).一个异步请求的action代码过于复杂，且异步操作太分散，相对比saga只要调用一个call方法就显得简单多了。
(2).action形式不统一，如果不一样的异步操作，就要写多个了。
优点：学习成本低

edux-saga:
优点：

（1）集中处理了所有的异步操作，异步接口部分一目了然(有提供自己的方法)
（2）action是普通对象，这跟redux同步的action一模一样({type:XXX})
（3）通过Effect，方便异步接口的测试
（4）通过worker和watcher可以实现非阻塞异步调用，并且同时可以实现非阻塞调用下的事件监听
（5）异步操作的流程是可以控制的，可以随时取消相应的异步操作。

缺点：学习成本高。

四、vue-router和redux讲解

vue-router:实现单页面前端路由,提供了两种方式：Hash模式和History模式。

1.Vue使用插件，即调用Vue的use方法；

// router.js 
Vue.use(Router);

2.实例化router，并配置router的配置对象，含routes路由；

// router.js 
export default new Router({
mode:"hash",
routes:[
{
path:"/hello",
component:HelloWorld
},
{
path:"/",
component:VuexTest
},
{
path:"/form",
component:Form
}
]
})

3.在vue实例上配置router实例；

// main.js
import router from "./config/router";
new Vue({
router,
render: h => h(App),
}).$mount('#app')

4.使用

<template>
<div id="app">
<router-link to="/">home</router-link>|
<router-link to="/form">form</router-link>|
<router-link to="/hello">HelloWorld</router-link>
<router-view></router-view>
</div>
</template>

React Router 提供三种类型组件，分别是路由组件(router components)，路由匹配组件(route matching components)，以及导航组件(navigation components).

你使用以上的任何一个组件都必须要引入一个名为 react-router-dom 的文件

import { BrowserRouter, Route, Link } from 'react-router-dom'

1.路由 (Routers)

ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), holder)

2. 路由匹配（Route Matching）

import { Route, Switch } from 'react-router-dom'
<Route path='/about' component={About}/> // renders <About/>

3. 路由渲染参数
```
<Link to='/about'>关于</Link>
```

五、vue和react区别

相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM。

六、vue常见问题和react常见问题