前端面试题

1.vuex的工作流程

vuex的作用：项目数据状态的集中管理，复杂组件的数据通信问题。

state:vuex的基本数据，用来存储变量
getters：从基本数据派的数据，相当于state的计算属性
mutation：提交跟新数据的方法，必须是同步的，每个mutation都有一个字符串的事件类型和一个回调函数
action：提交的是mutation，而不是直接变成状态，action 可以包含任意的异步操作
modules：模块化，可以让每一个模块拥有自己的state，getters,mutation，action。

1. 在vue组件里面，通过dispath来触发actions提交修改数据的操作。
2. 然后通过actions的commit来触发mutations来修改数据。
3. mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
4. 最后由store触发每一个调用它的组件的更新

生命周期

分为八个阶段：创建前/后，载入前/后，更新前/后，销毁前/后；

1. 创建前：beforeCreate：组件实例刚刚被创建，无属性
2. 创建后：created：组件实例创建完成，有属性，没有DOM（el没有被挂载），data已经完成，el生成了，还没有挂载。
3. 载入前：beforeMount：模板编译之前，有DOM，并没有把DOM挂载。
4. 载入后：mounted：模板编译之后，数据都加载到页面上
5. 更新前：beforeUpdate:组件更新之前，数据已经跟新了，但是没有挂载
6. 更新后：Update：组件更新之后，数据已经更新了，并且挂载。
7. actived：keep-alive,组件被激活时
8. deactiva：keep-alive，组件被激活完成
9. 销毁前：beforeDestory：销毁之前，实例仍然完全可用
   10.销毁后：destroyed：销毁完成，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

MVVM

1.mvvm:MVVM分为Model、View、ViewModel三者。
Model：代表数据模型，数据和业务逻辑都在Model层中定义；
2.View：代表UI视图，负责数据的展示；
3.ViewModel：负责监听Model中数据的改变，并且控制视图的更新，处理用户交互操作；
4.Model和View并无直接联系，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会载Model中同步。
这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

vue中date为什么时函数

每次使用组件时都会对组件进行实例化操作，并且调用data函数返回一个对象作为组件的数据源，这样可以保证多个组件间数据互不影响，如果data是对象的话，对象属于引用类型，会影响所有的实例，所以为了保证组件不同的实例之间data不冲突，data必须是一个函数

vue-route和vue-router

vue-route是一个局部的对象，可以获取对应的name、path、params、query等
vue-router是一个全局的对象，通过vue.use()和vue router
得到一个router的实例对象，包含了所有路由，包含了所有关键的对象和属性。

检测一个变量是否是string类型

function a(obj){
	return typeof(obj)=="string";
}
alert(a(123));
alert(a("abc"));

浏览器是如何渲染页面的

1. 解析文档构建DOM树，浏览器的解析内容可以分为三个部分： HTML/XHTML/SVG，解析这三种文件后，会生成DOM树（DOM Tree）CSS解析样式表，生成CSS规则树（CSS Rule）
2. 构建渲染树，解析文档完成后，浏览器引擎会将CSS Rule Tree附着到DOM Tree 上，并根据DOM Tree和CSS Rule Tree构造Rendering Tree （渲染树）。
3. 布局与绘制渲染树：解析position，overflow，z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）

单页面的理解以及优缺点

SPA仅在web页面初始化时加载相应的HTML，JavaScript和CSS，一旦页面就在爱完成，spa不会因为用户的操作而进行页面的重新加载或跳转；而是利用路由机制 实现HTML内容的变换，可以避免页面的重新加载。
优点：

1. 用户体验好，快，内容改变不需要重新加载整个页面，避免了不必要的跳转的重复渲染。
2. spa相对于服务器压力小
3. 前后端分离，架构清晰，前端负责交互逻辑，后端负责数据处理。

缺点：
1.初次加载慢：为实现spa页面，需要将加载页面的时候经js，css统一加载，部分页面按需加载；
2.不利于SEO：由于所有的内容都在一个页面中动态替换展示，所以SEO上有天然的弱势

生命周期的钩子时如何呈现的

vue的生命周期钩子就是回调函数，创建组件实例的过程中调用相对应的钩子方法。核心是一个发布订阅模式，将钩子订阅好，在对应的阶段进行发布。