题集（11.6）

1.vue中路由中的钩子函数

（1）全局前置守卫     router.beforeEach 
（2）全局后置钩子     router.afterEach
（2）在配置路由时在路由中写钩子函数（路由独享的守卫），进入路由beforeEnter钩子函数
（3）组件内的守卫（   beforeRouteEnter，beforeRouteLeave，beforeRouteUpdate ） 
   beforeEnter函数有三个参数，to是去往哪个界面，from是从哪个界面过来，
   next相当于开关是否允许跳转到去的页面

2.$$route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

3.请问 v-if 和 v-show 有什么区别？

相同点： 两者都是在判断DOM节点是否要显示
不同点：
a.实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。
  v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；  
v-show只是简单的基于css切换；

c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；
 v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换；
  v-show有更高的初始渲染消耗，适合做频繁的额切换；

4.vuex有哪几种属性?对每个属性的了解？

有 5 种，分别是 state、getter、mutation、action、module
1. 其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
2.  getter 可以对 state 进行计算操作，getter有点类似vue.js的计算属性。虽然在组件内也可以做计算属性，
    但是 getters 可以在多给件之间复用
4. mutation可以更改store中state状态，那么我们需要执行一个相应的调用方法：store.commit。
5.  action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。
    在页面中如果我们要嗲用这个action，则需要执行store.dispatch
6. module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。

5.前端怎么性能优化？

内容方面：

1)减少 HTTP 请求 (Make Fewer HTTP Requests)

2)减少 DOM 元素数量 (Reduce the Number of DOM Elements)

3)使得 Ajax 可缓存 (Make Ajax Cacheable)

针对CSS：

1)把 CSS 放到代码页上端 (Put Stylesheets at the Top)

2)从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3)精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4)避免 CSS 表达式 (Avoid CSS Expressions)

针对JavaScript ：

1)脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

2)从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3)精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4)移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image)：

1)优化图片

2)不要在 HTML 中使用缩放图片

3)使用恰当的图片格式

4)使用 CSS Sprites 技巧对图片优化