面试总结——VUE

1.Vue-router 懒加载 

当打包构建应用时，js会变得非常的大，影响页面加载速度，如果把不同的路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，这样就高效多了！

正常加载组件时：

vue异步组件实现懒加载：

 

vue-router懒加载：

(1)异步组件实现懒加载：component:resolve=>require(['需要加载的路由的地址'],resolve)

 

(2) ES提出的import方法（最常用）：const HelloWorld = ()=>import('需要加载的路由的地址')

2.生命钩子函数

• beforeCreate和created
• beforeMount和mounted
• beforeUpdate和updated
• activated和deactivated
• beforeDestroy和destroyed
• errorCaptured

Vue生命周期图示

 

3.VueX如何实现通讯

Vuex使用单一状态树，用一个对象包含了全部的应用级状态；

首先明白Vuex的几个概念：

State：存储状态值

Getter：有时我们需要从state中派生出一些状态，并且多个组件都需要用到这些值，这个就类似于computed一样，并且getter的返回值会被缓存起来，只有它的依赖值被改变了它才会被重新计算

Mutation：更改state的唯一方法就是提交mutation，每一个mutation都有一个字符串的事件类型和一个回调函数，这个回调函数会接受state作为第一个参数

Action：类似于mutation，但是action不是直接修改的状态，而是提交的mutation，并且action可以包含任意异步操作

Module：当应用变得很复杂的时候，我们可以将Vuex划分成不同的模块，每个模块都拥有自己的state、mutations、getter、actions

Vuex的API文档

3.父子组件通讯

父子间通过props进行通讯

4.Vue中使用到的性能优化

• 提取css到单独文件：当使用单文件组件时，组件内的 CSS 会以 style标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。
• store数据的扁平化
• 对js、css、svg进行压缩处理
• 对路由组件进行懒加载
• 源码的优化：
  • v-if和v-show的选择：v-if属于懒加载，为true时才会加载，但是对于无需权限频繁调用的组件，使用v-show能减少系统的切换开销
  • 为item设置位移key值：在列表数据进行遍历渲染时，需要为每一项item设置唯一key值，方便vuejs内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。
  • 组件细分
  • 减少watch的使用量，能用computed实现的尽量用coupute实现
  • 图片资源按需加载，可以使用v-lazy之类的懒加载