React组件定义的规则
React目地是将前端页面组件化，组件和组件之间肯定是有关系的，给每一个组件设定好合适的边界，可以有效的降低对页面重构时对其他组件之间的影响。同时使我们的代码更加的美观
JSX语法的特点
定义标签时只允许有一个标签，单标签一定要闭合，image标签必须添加alt属性，标签都是小写字母组件都是大写字母(首字母),class需要写成className，html内容转义dangerouslySetlnnerHTML html内容转义相当于Vue中的v-html这种操作是比较危险的，因为会引来XSS攻击，使用{}可以做条件判断，但是不能有复杂的逻辑，只能写表达式
React创建组件的三种方式
1、函数式定义无状态组件 2、es5原生方式React.Class定义组件 3、es6形式的extends React.Component定义组件
React定义Css的方法
React中通过JSX语法将HTML标签和js语法联系在一起。 1、直接内联使用注意驼峰命名不能使用短- JSX语法中编写JS的表达式需要使用{},而定义的样式又是以对象的形式存在的，所以看起来是在style标签里面使用了两个大括号 2、css代码与js代码分离，JSX标签定义className属性
JS箭头函数理解
箭头函数没有自己的this。箭头函数会捕获上下文的this值，作为自己的this值 箭头函数this不可变call()、apply()、bind()、这些方法也无法改变箭头函数this的指向 箭头函数不能用new关键字来实例化对象不然会报错 箭头函数没有arguments对象
React里面props的特点
传递数据只可以读不可以改 遵循单项数据流
React 里面如何校验props
为什么需要校验相对于子组件来说，props是外来数据，无法保证传输过来的数据格式是什么，所以我们需要校验规则来保证我们数据的单纯性 导入props-types包。这个是脚手架创建项目时就自带了，无须额外安装 引用import propTypes from 'prop-types' 使用方法:组件名.propTypes={属性名:类型,属性名2:类型2} 如果类型不对时则报出明确错误,便于错误分析 props常见类型:array \ bool \ function \ number \ object \ string React 元素类型 element 可以传可以不传:isRequired 必须传入
什么是虚拟DOM
虚拟DOM是js对象来描述DOM结构，但是他不是真实的DOM，所以叫虚拟DOm 为什么使用虚拟dom因为在Vue和React之前 我们更改视图的时候 ， 就需要遍历查找的方法找到需要更改的DOM ， 每查询dom时都需要遍历整颗dom树 ， 相当损耗性能。但是使用虚拟dom每次dom更改会被变成js对象的属性更改 这样一来就可以查找js对象的属性变化 要比查找dom树的性能开销小 虚拟dom就是为了解决浏览器性能问题
context有什么作用如何使用
隔空传递 props一级一级的传递数据比较麻烦 用context隔空传递 this.context
三大属性 context props state 三者的区别
一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state props是一个外部传进组件的参数，主要作用就是从父组件像子组件传递数据，props只可读不可写，只能通过外部组件主动传入新的props来重新渲染页面 state首先组件初始化的时候，通过this.state给组件设定一个初始的state，在第一次render的时候就会这个数据来渲染组件 state和props的不同点是state是可以被修改的，不过不能同过this.state的方式直接修改，而需要同过this.setState的方式修改state 当我们调用this.setState方法时，React会重新调用render方法也就是重新渲染组件
父改子
子组件通过props接受父组件state 父组件调用setState 更改state
子改父亲
通过反向props 将父组件修改state方法通过props传递给子组件 子组件出发
兄弟组件通讯
子组件a通过反向props更改父组件的state方法 父组件再去修改子组件b
高阶函数高阶组件
函数复用组件 返还一个新的组件 新的组件接受这个组件作为子组件叫做高阶函数 组件复用组件叫高阶组件
mongoDb jsonserver
当你被问到你怎么使用mongoDb jsonserver 答：只是做简单的模拟后端数据
react白屏怎么优化
1.压缩 2.代码模块化 3.图片懒加载 4.服务器缓存 5.编译到 ES2015+，提高代码运行效率，减小体积 6.使用 lazyload 和 placeholder 提升加载体验 7.正确地使用 Webpack 4.0 的 Tree Shaking
vue框架和React框架的区别
相同
1.都使用了虚拟DOM 2.组件化开发 3.都有路由思想
不同
1.React jsx Vue的template 2.数据变化 React手动setState Vue自动（初始化已响应式处理 object.defineProperty） 3.数据绑定不同 vue是实现双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层发生改变更新视图层； React是单项数据流，react中属性是不允许更改的，状态是允许更改的。react中组件不允许通过this.state这种方式直接更改组件的状态。自身设置的状态，可以通过setState来进行更改。 4.Redux Vuex
MVVM是什么？和MVC有什么区别呢
M：模型 负责请求数据 V：视图 负责展示数据 C: 控制器 用户交互的地方 例如点击事件 思想：控制器将模型的数据展示在视图 vue是mvvm框架 但是不是严格符合mvvm 因为mvvm规定模型和视图不能直接通讯 而vue中的ref可以
浏览器的渲染流程
答： 浏览器将获取的 HTML 文档解析成 DOM 树； 处理 CSS 标记，构成层叠样式表模型（CSSOM）； 将 DOM 和 CSSOM 合并为渲染树（rendering tree）； 渲染树的每个元素的内容都是计算过的，称之为 布局layout； 将渲染树上的各个节点绘制到屏幕上，称之为 绘制painting；
事件循环
(答：事件循环就是，执行代码时，遇到同步代码就放到执行栈中， 遇到异步代码时就放到队列中，执行栈中代码执行完就去队列中取， 取到之后放到执行栈中执行，执行完就继续到队列中取， 然后一直重复操作，这个步骤就是事件循环)
js是单线程语言，同步任务会依次进行执行任务队列，异步任务不在同步任务队列中执行，同步任务执行完毕以后，异步任务才可以执行
高阶组件是怎么理解的
(答：函数接收组件返回一个新的组件 新的组件使用传入的组件作为子组件)
diff算法的优点
(答：当组件更新的时候react会创建一个新的虚拟dom树和之前存储的dom树进行对比，如果dom节点相同，那么就会进行局部更改 如果节点不相同就会删除旧的节点以及他的子节点，然后替换上新的节点)
有哪些选择器
1、 标记，元素选择器（标签名） 选择的是网页内所有相同的标签 2、id选择器(id名不能重复) html css #box 3、class选择器 类选择器 html css .box 4、群组选择器(给不同的内容设置相同的样式) css .box1,#box2 包含选择器 父子选择器（只能往下选择一层） 父元素 > 子元素 后代选择器（只要是包含关系都能选中） 祖先元素 后代元素
- 通配符（选中网页内所有的内容，html）
- { margin: 0; /* 外边距 / padding: 0; / 内边距 */ }
CSS3新特性
边框：border-radius、box-shadow、border-image 背景：background-clip、background-origin、background-size、background-break 文字：word-wrap
- normal：使用浏览器默认的换行
- break-all：允许在单词内换行 颜色：rgba transition 过渡 transform 转换 animation 动画
html5 新特性
头部标签 导航标签 内容标签 侧边栏标签 尾部标签 音频 视频redux的核心原理是什么?
1.将应用的状态统一放到state中，由store来管理state。 2.reducer的作用是返回一个新的state去更新store中对用的state。 3.按redux的原则,UI层每一次状态的改变都应通过action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state，这样就完成了一次状态的更新 4.subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dispatch发起后依次执行 5.可以添加中间件对提交的dispatch进行重写
应用的状态放到state中 store是用来管理state的 、 用户通过事件发送一个action action 发送一个dispatch 到reducer reducer返回新的state到store中更改state
sass和less的区别
Less和Sass的主要不同就是他们的实现方式。 Less是基于JavaScript，是在客户端处理的。 Sass是基于Ruby的，是在服务器端处理的。 关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
什么是vue
"vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。"
vue 和 react区别
相同点：1，都是用了虚拟 DOM。2，都提供了响应式和组件化的视图组件。3，都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关库。 不同点：1，React中，当某组件的状态发生改变时，它会以该组件为根，重新渲染整个组件子树，而在Vue中，组件的依赖是在渲染的过程中自动追踪的，所以系统能准确知晓哪个组件确实需要被重新渲染。2，Vue的路由库和状态管理库都由官方维护支持且与核心库同步更新，而React选择把这些问题交给社区维护，因此生态更丰富。3，Vue-cli脚手架可进行配置
Vue 的 核心是什么 ?
是一套构建用户界面的渐进式框架。 在最初前端开发中，为了完成某个任务，我们首先利用JS从HTML文件中获取DOM元素，随后添加事件，最后进行一系列的JS编程操作，姑且可以叫做DOM流，DOM流的开发看起来似乎很简单实用，但是随着业务需求不断变动，导致代码会越来越混乱，无法维护。在现实的开发中，复杂的业务逻辑和巨大的代码量，更是DOM流根本无法承受的。为了解决这个问题把JS代码分为三个板块，数据（M）、视图（V）、逻辑控制（*）。这也是模块化的概念也是React的核心概念MVVM、MVC
如何理解声明式和编程式 的区别
声明式：只需要声明在哪里，做什么，不用关心如何实现 编程式：需要以具体代码表达在哪里，做什么，如何实现
Vue 常用的指令有哪些
v-if：根据表达式的值真假条件渲染元素，在切换时元素及它的数据绑定组件被销毁并重建 v-show：根据表达式的真假，切换元素display CSS属性 v-for：循环指令，数组或对象渲染一个列表，要有一个key值 虚拟DOM才会知道你操作的是哪一个DOM v-bind：动态的绑定一个或多个特性，或一个组件prop到表达式。 v-on：给指定事件绑定事件监听器。 v-model:实现表单输入双向绑定 v-pre：跳过这个元素和它的子元素编译过程，跳过大量没有指令的节点较快编译 v-once：只渲染元素和组件一次，随后重新渲染，元素/组件及其所有子节点都会被视为静态内容跳过，这里可以用于优化性能 v-cloak：这种插值符号在页面刷新的时候，会出现在页面上，也就是闪烁，为了解决这个问题，我们常常会在标签内添加v-cloak，然后再样式添加display:none。 v-html：把html字符串当成html渲染，类似于innerHTML，但是要谨慎使用，不然会出大问题。
v-if 和 v-show的区别
他们两个都是通过表达式的真假条件 也都是控制元素的显示隐藏 区别就在于他们是通过什么来显示隐藏 v-show是通过display：none；来控制元素显示隐藏 v-if是通过控制虚拟dom销毁和重建 来联动真实dom 当虚拟dom上的节点被删除，vue的响应式系统会实时的删除对应的真实dom上的节点从而控制元素的显隐
如何理解Vue里面的数据响应式
响应式即对外界的变化做出反应的一种形式，Vue目前通过Object.defineProperty 来实现响应式 Object.defineProperty 给对象添加属性value 给对象添加getter/setter，用于对属性的读写经行监控
data为什么要return
不适用return包裹的数据 就会变成全局的 会造成变量污染 被return包裹的便量只在组件中生效 不会影响其他组件
一、项目重构的几个步骤
1.再次了解业务 在重构之前再次了解业务，了解需求。从需求的角度，找出项目不合理的地方，从需求发展的角度，规划好项目需要预留的东西。 2.再次了解技术 对于不熟悉的技术，再次了解技术，分析项目中技术使用的是否合理，是否有更好的办法。 3.分析现有项目 对现有项目全面梳理，取其精华、去其糟粕。着重分析数据方面的问题。确定项目需要推倒重来式的重构，还只需要部分重构。 4.重构规划 需求分析，技术分析。项目设计，时间安排。 5.重构及总结 进行项目重构，继续维护原有项目。总结技术和业务。 二、项目重构的意义 1.可持续发展 一个混乱的项目，重构是让项目活下去的最好的办法，也是比较痛苦的一个办法，需要极大的毅力和决心。一般人还是喜欢缝缝补补，凑合下去。重构后项目增加新的需求和有一些变动的时候改起来也容易了。 2.自我提升的意义 通过重构项目可以再次回顾整个项目，复盘整个项目，用更好的办法重新构建项目，是对技术的一个很好的提升。
为什么data是个函数并且返回一个对象呢？
data之所以只是一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样可以避免多出调用之间的数据污染。
递归
递归就是函数内部自己调用自己 在element-ui树形结构用过，将扁平的数据结构转换成树形结构。
变异数组方法和非变异数组方法
变异数组方法：
push() pop() shift() unshift() splice() sort() reverse() join()
非变异数组方法:
filter() 选择器
concat() 连接数组
slice() 截取
find() 条件满足就立即返回 查不到就undefined
基本数据类型和引用数据类型区别
基本数据类型存在栈内存中 引用数据类型存在堆内存中 因为引用数据类型大小会改变，所以不能放到站内存中
原型和原型链
每一个对象都有一个隐藏属性__proto__ 这个属性会指向这个对象的原型也就是prototype 当我们要查找对象的中的属性 会去对象本身属性上查找 如果没有 会通过__proto__查找到这个对象的prototype 如果没有就一直找 这个操作就叫原型链 object。prototype没有__proto__
jsonp的原理
Jsonp 其实就是一个跨域解决方案。 Js 跨域请求数据是不可以的,但是js跨域请求js脚本是可以的. 所以可以把要请求的数据封装成一个 js 语句,做一个方法的调用. 跨域请求 js 脚本可以得到此脚本.得到 js 脚本之后会立即执行. 可以把数据做为参数传递到方法中.就可以获得数据。从而解决跨域问题. jsonp 原理：(动态创建script标签,回调函数) 浏览器在 js 请求中，是允许通过 script 标签的 src 跨域请求，可以在请求的结 果中添加回调方法名，在请求页面中定义方法，就可获取到跨域请求的数据.
promise用法
一、什么是Promise?我们用Promise来解决什么问题？ Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大. 从语法上讲,promise 是一个对象，从它可以获取异步操作的消息； promise里为同步,reslove为异步，then为异步,setTimeout为最后 二、promise 有三种状态：pending 初始状态也叫等待状态，fulfilled 成功状态， rejected 失败状态；状态一旦改变,就不会再变.创造 promise 实例后,它会 立即执行 三、Promise的两个特点 1、Promise对象的状态不受外界影响 2、Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆、
promise的三种状态 (答：状态成功，状态失败，状态等待中) promise的三种函数回调 (答：then catch finally)
什么是闭包 项目如何使用闭包 闭包有什么优缺点
解释：函数套函数。闭包两个需求：1.必须有两个函数，并且是嵌套关系，外面的函数必须返回里面的函数；2.在全局中必须接收返回 函数作为变量储存 2.闭包的优缺点 优点：有利于封装，可以访问到局部变量；不会污染全局变量 缺点：内存占用浪费；内存泄漏 内存泄漏：不再用到的内存，没有及时释放 闭包产生的原因： Js 最大的缺点就是没有类，尤其是es5，自身没有面向对象，变量和函数通常都是写在同一个空间中，变量重名—污染，函数名重名—污染 而闭包能够形成一个封闭的空间，可以避免污染，储存私有变量，存在函数里面 ，这个私有变量不会在函数运行完后被清理 ，可以像全局变量一样被使用，不会失效。
栈内存和堆内存
栈(stack): 由操作系统自动分配内存空间，自动释放， 存储的是基础变量以及一些对象的引用变量，占据固定大小的空间。 堆(heap)： 由操作系统动态分配的内存，大小不定也不会自动释放， 一般由程序员分配释放，也可由垃圾回收机制回收。
vue双向数据绑定原理
vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的，就是通过object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你向做的事情是一个语法糖
深浅拷贝、深浅复制、深浅监听
深浅拷贝：对于引用数据类型，只产生一个新的指针，不在堆内存中产生新的数 据就是浅拷贝；既产生新指针，又该指针又指向新的数据就是深拷贝 深浅复制：引用数据类型有多层套嵌时，只有第一层的数据是深拷贝，下面的数据还是浅拷贝时 叫做浅复制；每一层的引用数据都是深拷贝时，叫做深复制 深浅监听：与深浅复制对应，只能监听第一层引用数据的变化叫做浅监听，监听多层引用数据的变化叫深监听
继承
构造函数继承 使用call后 apply方法将父对象的构造函数绑定在子对象上 缺点：只继承了构造器 原型对象prototype上的属性和方法没有继承 原型继承：只会继承父类原型对象的属性和方法，不能继承实例的属性和方法 组合继承：即原型继承+call或apply继承 ES6的 class extends
vuex
所谓的Vuex其实就是一个为Vue.js设计的数据仓库，就是把各个组件公用的数据放到一个仓库里面进行统一的管理，这样既使得非父子组件间的数据共享变得简单明了，也让程序变得更加可维护（将数据抽离了出来）,而且只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新。
一点小拓展vuex
vuex的状态储存是响应式的，当我们使用vuex进行全局状态管理时，vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，会发现之前获取的vuex状态的数据消失了，里面的数据就会恢复到初始化的状态。因为，刷新页面后，vuex会重新更新state vuex存取值一般都是放在computed计算属性中，但是页面一刷新数据就没了。方法一： 思路 监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。 页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。方法二： 安装插件 vuex-persistedstate实现数据持久化，来解决使用vuex存储状态时页面刷新后数据消失的问题 vuex-persistedstate：在页面重新加载之间保持并重新补充Vuex状态
for in 和 for of 区别
for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。 所以for in更适合遍历对象，for of 更适合遍历数组。 for...in循环：遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。可以中断循环 forEach: 只能遍历数组，不能中断，没有返回值(或认为返回值是undefined)。 map: 只能遍历数组，不能中断，返回值是修改后的数组。 forEach和map 不能直接改变原数组就是在里面你做操作（加减乘除）之类的都没用
arguments 类数组和数组的区别是什么？
arguments是类数组，但不是数组 不具有数组所具有的方法 类数组是一个对象 而真实数组是一个array类型
什么是闭包？闭包的作用是什么？闭包有哪些使用场景？
闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包最常用的方式就是在一个函数内部创建另一个函数。 闭包的作用有: 封装私有变量 模仿块级作用域(ES5中没有块级作用域) 实现JS的模块
vue路由懒加载(使用import)
const 组件名=() => import('组件路径');
v-for 中的key为什么不要使用index
我们需要使用每一个key来给每个节点做一个"唯一标识" diff算法可以正确的识别此节点 找到正确的位置插入新的节点 如果是使用index的话因为index是会变化的 当插入数组的时候 原来的下标如果是2的话 会变成3的就达不到---对应的关系,所以key一定要绑定是"唯一性的"
Vue中的v-if和v-for为什么不能一起用？
因为v-for比v-if优先级高 所以嵌套使用的话 每次v-for的时候都会执行一次v-if 造成重复计算问题 会影响性能
let、const 以及 var 的区别是什么？
- let const 不会变量提升，而var定义的会有变量提升
- let和const是JS中的块级作用域
- let const不允许重复声明
- let const定义的变量如果定义语句之前会报错 而var不会 (就是不能先赋值后声明)
- const 声明一个只读的常量 一旦声明常量的值就不能被改变(如果声明的是一个对象 那么不能改变的是对象的引用地址)
vue组件通讯
- 父子组件通讯 --- props ; children ; provide \ inject ; ref ; listeners
- 兄弟组件通讯 --- bus (事件总线); Vuex
- 跨级通讯 --- bus (事件总线) ; Vuex ; provide \ inject ; listeners
