前端面试(下)

1、对vue生命周期与钩子函数的理解

【生命周期】：每个vue实例被创建之前一直到结束经历的一系列的初始化过程（关键点：创建到结束的过程），vue实例的结束，也就意味着生命周期的结束。生命周期分为8个阶段，会触发不同的钩子函数辅助编程人员对整个vue实例进行js控制。

【钩子函数】：创建前/后，载入前/后，更新前/后，销毁前/后，对应的钩子函数分别是：

beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestroy/destroy。

A)创建前/后：在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有。created阶段data 和 methods都已经被初始化好
B)载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
C)更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
D)销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在
 
常考的函数：created、mounted

2、简述对MVVM的理解
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model, View , VM(ViewModel)。VM是MVVM思想的核心，VM是M和V直接的调度者。Model：保存的是每个页面中单独的数据；VM分割了M和V，当V层想要获取或保存数据时，都由VM做中间人进行处理；V就是页面中的Html结构。

3、DOM渲染在哪个周期就已经完成了，如果请求一个接口最早在哪个生命周期比较合适？
DOM渲染在mounted阶段完成，如果调用接口最早可以在created阶段。

4、Vue组件间的如何进行参数传递？如父传子、子传父、兄弟传值
a)父组件与子组件传值：Props——是一个数组，单向传值。传值有两种方式属性值固定和属性值动态绑定的方式。
b)子组件向父组件传递数据: 子组件通过$emit方法传递参数,触发父组件event
c)兄弟组件之间的传值：通过事件中心

5、为什么组件中的data返回的是一个函数？
组件中的data返回的是一个函数，函数时会形成闭包，通过return 返回对象的拷贝，可以保证每个组件都有独立的数据，形成数据隔离。（vue实例化中的data是一个对象，对象是引用类型，多个组件实例共享一个对象，其中一个组件改变data的值，其他实例也会受到影响）

6、Vue的路由实现：hash模式和 history模式
hash模式—— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。如URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history模式 —— 新增 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。前端的 URL 必须和实际向后端发起请求的 URL一致。

7、Vue路由的钩子函数有哪些？
路由钩子函数:

• 全局钩子函数:
  router.beforeEach((to, from, next) => {
  　　　　next() //正常跳转，不写的话，不会跳转
  　　})
  　　router.afterEach((to, from) => { // 举例: 通过跳转后改变document.title
  　　})

• 针对单个路由钩子函数
  beforeEnter(to, from, next){
  　　　　next() //正常跳转，不写的话，不会跳转
  　　}

• 组件级钩子函数
  beforeRouteEnter(to, from, next){ // 这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有创建出来
  beforeRouteUpdate(to, from, next){//可以解决二级导航时，页面只渲染一次的问题，也就是导航是否更新了，是否需要更新

8、对keep- alive的了解？
keep-alive可以缓存不活动的组件.ps：一般情况下组件切换时是默认销毁，切换回来时又重新初始化。

9、如何让CSS只在当前组件起作用？
当前组件的

10、$route和 Router的区别
$route为当前router跳转对象里面可以获取name、path、query、params等
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

11、Vue中key值的作用？
key的作用主要是为了高效的更新虚拟DOM。用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

12、怎么定义 vue-router的动态路由？怎么获取传过来的值

定义：在router目录下的index.js文件中，对path属性加上/:id。
获取：使用router对象的params.id

13、jQuery和Vue的区别？
JQ:是js库，属于代码集合产品，提供很多的API函数或属性，供程序员调用，用起来也比较随意。直接操作DOM
Vue：是框架，提供了很多新的技术（如虚拟DOM、双向绑定、渐进式等），其次得遵循开发者的规则来写代码，同时框架对项目的侵入性比较大（即中途换框架，代码需要重写），不直接操作DOM

14、Vue常用的修饰符
常用修饰符：v-model.lazy\number\trim
其他：
事件修饰符:@click.stop\prevent\self\once等
键盘修饰符:@keyup.enter\tab\delete\esc\space\up\down等
系统修饰键:@click.ctrl\shift\alt\鼠标按键修饰符等

15、本地存储分别有哪些？
sessionStorage:只会在窗口打开的时候才有效，一次性缓存会话，关闭浏览器自动释放
localStorage:只要没有手动清除，就会一直保留，永久存储，以文件形式存储
cookie:是用来跟踪用户信息的，默认只是一次性会话，维持到浏览器关闭

16、用过哪些UI框架？

UI框架挺丰富的，使用框架提供的组件可以快速的开发项目，目前我用过的UI框架有：elementUI、mintUI、layUI，这几个在项目中用的比较多一些。咱们公司有用到哪些UI框架吗？

17、第一次页面加载会触发哪几个钩子？
beforeCreate， created， beforeMount， mounted

18、什么是vue的计算属性，computed和methods、watch的区别，应用场景
计算属性：一般就是用来计算复杂的逻辑运算，并将结果缓存，提升效率
a)computed:复杂的计算逻辑放在计算属性中，提升效率；有缓存，数据发生改变，会重新执行再次缓存；有返回值；适合复杂的计算逻辑
b)methods:无缓存，只要数据发生改变，会重新执行，但不缓存。普通逻辑比如业务逻辑
c)watch:监测数据的变动，属性是一个对象，键是需要观察的表达式，值是对应回调函数，回调函数得到的参数为新值和旧值
相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数

19、vuex是什么？是用来解决什么问题的
vuex专为Vue.js应用程序开发的状态管理模式，进行保存需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新。

20、vue 2.0与 3.0的双向绑定实现的区别和优缺点
vue2.0通过Object.defineProperty来劫持对象属性的getter和setter操作，当数据发生变化时发出通知
vue3.0通过Proxy来劫持数据，当数据发生变化时发出通知
优点：

• 直接监听对象而非属性
• 直接监听数组的变化
• 拦截方式较多（有13种方式）
• Proxy返回一个新对象，可以只操作新对象达到目的，而Object.defineProperty只能遍历对象属性直接修改（需要用深拷贝进行修改）
• Proxy作为新标准将受到浏览器厂商重点持续的性能优化

21、webpack打包的整个流程，loader、plugin是干什么用的

1. 生成options (将webpack.config.js和shell中的参数，合并中options对象)
2. 实例化complier对象 （webpack全局的配置对象，包含entry，output，loader，plugins等所有配置信息）
3. 实例化Compilation对象 (compiler.run方法执行，开始编译过程，生成Compilation对象)
4. 分析入口js文件，调用AST引擎(acorn)处理入口文件，生成抽象语法树AST，根据AST构建模块的所有依赖
5. 通过loader处理入口文件的所有依赖，转换为js模块，生成AST，继续遍历，构建依赖的依赖，递归，直至所有依赖分析完毕
6. 对生成的所有module进行处理，调用plugins，合并，拆分，生成chunk
7. 将chunk生成为对应bundle文件，输出到目录

loader是文件转换器，将webpack不能处理的模块转换为webpack能处理的模块，就是js模块
plugin是功能扩展，干预webpack的打包过程，修改编译结果或打包结果

22、promise是用来解决什么问题的，有哪几种状态？
解决了异步嵌套（回调地狱）、可读性差、信任差的问题。
三种状态：
pending：初始状态，既不是成功也不是失败
fulfilled：意味着操作完全成功
rejected：意味着操作失败

23、vue单页面应用的优缺点
单页面的优点：
1）用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小。
2）前后端分离。
3）页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
1）不利于seo。
2）导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
3）初次加载时耗时多。
4）页面复杂度提高很多。

24、简述你开发中常用的前端框架、开发/版本管理工具及其优缺点
常用的是vue框架+vscode编辑器+git版本管理进行开发，通过使用框架可以快速的对项目进行开发。vue比较简单易用、提供灵活的渐进式、组件化开发属于轻量高效级的框架，但是目前而言vue缺少一些比较高级进阶的教程文档，对于一些浏览器的兼容支持性不是很好。