vue 干货

1.vue路由的钩子函数 首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next。 to：route即将进入的目标路由对象。 from：route当前导航正要离开的路由。 next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。 2.vue路由history模式_如何去除vue项目中的# 在使用vue-cli搭建的环境中，浏览器上URL地址中是存在'#'的，这是由于vue-router 默认 hash 模式，不难发现#的出现真的很丑陋。官网给出了如何使用history模式，例如: www.fly63.com/article/det… 3.vuex是什么？怎么使用？哪种功能场景使用它？ 只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

在main.js引入store，注入。新建了一个目录store，… export 。 场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车 state：Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。 mutations：mutations定义的方法动态修改Vuex 的 store 中的状态或数据。 getters：类似vue的计算属性，主要用来过滤一些数据。 action：actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

const store =newVuex.Store({//store实例 state:{ count:0 }, mutations:{ increment (state){ state.count++ } }, actions:{ increment (context){ context.commit('increment') } } })

modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理。

const moduleA ={ state:{...}, mutations:{...}, actions:{...}, getters:{...} } const moduleB ={ state:{...}, mutations:{...}, actions:{...} } const store =newVuex.Store({ modules:{ a: moduleA, b: moduleB }) 10. 3、router的区别 答：router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4.构造函数与一般的函数的区别在于，构造函数是在初始化的时候就调用，且只会调用一次，构造函数是没有返回值的

一般函数（方法）是在初始化后才调用，可以被调用多次，可以有返回值

在构造函数中可以调用本类的其他方法，其他本类一般方法不能调用构造函数： 5. delete arr[1] console.log(arr) 数组长度不变， empty/undefined this.$delete(arr,1) 数组长度变 6.如何优化SPA应用的首屏加载速度慢的问题？ 将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度； 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件； 加一个首屏 loading 图，提升用户体验； 7. 前端如何优化网站性能？ 减少 HTTP 请求数量 在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。 合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。 采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。 控制资源文件加载优先级 浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。 一般情况下都是 CSS 在头部，JS 在底部。

利用浏览器缓存 浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。 减少重排（Reflow） 基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。 减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。

减少 DOM 操作 图标使用 IconFont 替换 8. 网页从输入网址到渲染完成经历了哪些过程？ 大致可以分为如下7步：

输入网址； 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址； 与web服务器建立TCP连接； 浏览器向web服务器发送http请求； web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）； 浏览器下载web服务器返回的数据及解析html源文件； 生成DOM树，解析css和js，渲染页面，直至显示完成；

转载于:https://juejin.im/post/5cd2a87ef265da03b57b707d