一、Vue和React的区别
相同点：
①　都支持服务器端渲染
②　都使用虚拟DOM来实现
③　都有VirtualDom，组件化开发，通过props参数进行父子组件数据的传递，都实现webComponent规范
④　只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件
⑤　都是JavaScript的UI框架，数据驱动视图，专注于创造前端的富应用
⑥　都有支持native的方案，React的React native，Vue的weex
⑦　都有管理状态，React有redux，Vue有自己的Vuex（自适应Vue）
不同点：
①　React严格上只针对MVC的View层，Vue则是MVVM模式
②　Virtual Dom不一样，Vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以React中会需要shouldComponentUpdate，这个生命周期函数方法来进行控制
③　组件写法不一样，React推荐的做法是Jsx+inline style，也就是把HTML和CSS全都写进Javascript，即‘all in js’。Vue推荐的做法是webpack + Vue-loader的单文件组件格式，即Html，css，js写在同一个文件
④　数据绑定：vue实现了数据的双向绑定，react数据流动是单向的
⑤　State对象在react应用中是不可变的，需要使用setState方法更新状态，在Vue中，state对象不是必须的，数据由data属性在Vue对象中管理
解法对比及优缺点：
在以下场景中，vue比react更好：
最新文档和更简单的语法。更小，更快速，更灵活。丰富的HTML模板，易于开发。
React比Vue好：
需要构建移动应用程序。专业和出色的社区支持，以解决任何问题。需要构建大型应用程序。轻量级，易于版本迁移。

二、Vue computed 和watch 的区别
计算属性 computed：
1.支持缓存，只有依赖的数据发生改变，才会重新进行计算。
2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化。
3.Computed属性会默认走缓存，计算属性是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个对多个或者一对一，一般用computed。
5.如果computed属性值是函数，那么默认会走get方法；函数的返回值就是属性的返回值；在computed中的属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性 watch：
1.不支持缓存，数据变化，直接会触发相应的操作；
2.Watch支持异步
3.监听的函数接收两个参数，第一个是最新值，第二个是输入之前的值。
4.Immediate：组件加载立即触发回调函数执行。deep：深度监听，便于发现对象内部值的变化。

三、Vue computed和methods的区别
1.Methods使用时，一般需要加括号，而computed则不需要。
2.Methods每次调用时重新执行函数，而computed在其内部变量不变或返回值不变的情况下多次调用只会执行一次，后续执行直接从缓存中获取该computed的结果。

四、什么是keep-alive？
Keep-alive是vue内置的一个组件，可以使被包含的组件保留状态或避免重新渲染。
属性：
Include - 字符串或正则表达式，只有匹配的组件才会被缓存
Exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

五、Vue自定义组件实现双向绑定的原理
v-model的本质：
就是子组件emit一个input事件
v-model对表单元素的处理：
v-model会忽略所有表单元素的value、checked、select attribute的初始值，而总将vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。
v-model在内部为不同的输入元素使用不同的property并抛出不同的事件：
text和textarea元素使用value property和input 事件；
checkbox 和radio元素使用checked property和change事件；
Select 字段将value作为property并将change作为事件；
如需要使用自定义的事件名：
model:{
prop:’自定义‘，
event:’自定义’
}

六、什么是$nextTick?
n e x t T i c k 就 是 告 知 D o m 什 么 时 候 更 新 完 ， 当 D o m 更 新 完 毕 后 ， nextTick就是告知Dom什么时候更新完，当Dom更新完毕后， nextTick就是告知Dom什么时候更新完，当Dom更新完毕后，nextTick里面的回调才会执行。

七、Webpack如何指定chunkName？
常用的webpack配置如下：
module.exports={
…//
Output:{
Filename:[name].[hash].bundle.js,
chunkFilename:[name].[hash].chunk.js
}
}

模板 描述
[hash] 模块标识符的hash
[chunkhash] chunk内容的hash
[name] 模块名称
[id] 模块标识符
[query] 模块的query，例如文件名?后的字符串
[function] 方法，可以返回一个Filename字符串

八、Webpack中的loader和plugin的区别
loader：
loader是运行在Node Js中，仅仅只是为了打包。
如：css-loader和style-loader模块为了打包CSS的。
babel-loader和babel-core模块为了把ES6代码转成ES5
Url-loader和file-loader是把图片打包的。
plugin：
plugin也是为了扩展webpack的功能，但是plugin是作用于webpack本身上的。而且plugin不仅只限制在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。Webpack提供了很多开箱即用的插件：commonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。
loader运行在打包文件之前（loader为在模块加载时的预处理文件）
plugins在整个编译周期都起作用。

九、为什么Promise.then比setTimeout执行早
事件循环机制中，每次循环称为tick，且每一次tick的任务如下：
1.执行栈选择最先进入队列的宏任务（一般都是script），执行其同步代码直至结束。
2.检查是否存在微任务，有则会执行至微任务队列为空
3.如有必要会渲染页面
4.开始下一轮tick，执行宏任务中的异步代码（setTimeout的回调等）宏任务与微任务。

宏任务：
宿主（Node、浏览器）发起的任务
在ES6规范中，将其称为task
Script、setTimeout、setInterval、I/O、UI rendering、postMessage、MessageChannel、setImmediate。
微任务：
Js引擎发起的任务
在ES6规范中，将其称为jobs
Promise、MutaionObserver、Process.nextTick。

十、Html5新特性有哪些？
(1)语义标签

、