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,渲染页面,直至显示完成;