前端面试问题解答（vue）

1:说明一下使用vue对项目开发的好处

vue框架采用了渐进式开发的原理，就是你项目需要什么，就导入什么，可以用在大项目上，在个人项目上也有很好的体验。组件化开发，使界面复用性得到提高，spa技术，只有一个html界面，变化效果通过路由组件的切换产生，不会导致界面的刷新。双向绑定技术，使我们可以将代码集中在逻辑上，而不是dom节点的操作上，提高了性能

2:讲解一下mvvm模式的基本了解

mvvm是一种设计模式，讲究的是由数据和界面变化的双向绑定，其中m代表model数据 v代表视图 vm viewmodel代表数据和视图之间的中间逻辑操作

3:数据双向绑定的基本原理

首先，我们通过observe中的defineProperty方法为每一个data添加set和get方法，每一个data创建一个dep发布者，里面存放所有的订阅者watcher（存放着使用该data的节点信息，每一个使用到data的元素节点都是一个watcher）。当界面的set属性被调用的时候，我们通过dep轮训的去调用其中所有的订阅者watcher，从而达到双向绑定的过程

4:虚拟dom是什么,为什么要引入虚拟dom

虚拟dom就是在真实dom之前通过js代码模拟出来的一个虚拟dom树结构，每当set调用时，我们不在直接去操作真实的dom结构，而是通过新虚拟dom和旧虚拟dom树之间进行比较后，得到最优化的方法，最后在得到真实dom去渲染界面

5:diff算法的基本过程,为什么需要在节点上添加key的操作

diff算法首先会判断节点的key和节点类型是否相同，如果不同，则直接

6:讲解一下computed和watch的区别

computed是计算属性，一定要return，并且没有参数传递，watch有参数传递，并且不用return 渲染顺序

7:vue有哪几个生命周期,不同的生命周期最适合分别适合做哪些操作

创建前后，挂载前后，销毁前后。创建data 挂载dom操作

8:初次渲染界面触发的生命周期有哪些,如果引入update会产生什么变化

创建前后，挂载前后，引入update会添加updated和unupdated。退出界面并不会进行destory操作

9:$nextTick的作用

微任务，在所有同步动作做完之后进行的操作

10:如何获取路由传过来的值

this.$route.params,路由有query和params

11:路由有哪几种导航钩子

全局导航钩子，组件导航钩子

12;路由导航的两种模式,他们俩的区别

hash和history，底层不同，#问题，存在请求不同

13:vuex有哪几种属性,分别是用来干什么的

mount getter modules action

14:.native的作用

.native 可以在父组件使用子组件的情况下，自定义的创造出一个事件，不被子组件当成自定义事件

15:事件冒泡的过程,在vue中如何防止事件冒泡

在父节点和子节点拥有同一个动作事件时，当子组件触发一个事件，该事件会像跑跑一样向上传递，使得父节点也会触发该事件的回调函数，我们在vue中可以通过.stop的方式进行防止事件冒泡

16:路由组件和普通组件的区别和使用场景

路由组件是指能够通过路由跳转的组件，一般路由组件里面包裹着普通组件，普通组件的使用通过定义components的方式进行获取

17:父子组件之间的通信问题

父传子通过props进行参数的传递，子传父通过emit和自定义动作的方式进行数据的传递

18:为什么v-for里面一般不嵌套v-if v-for和v-if的优先级

在vue2中，v-for的优先级大于v-if，所以会将组件全部渲染出来，然后再交给if进行判断是否要删除，这样子大大浪费了性能

19：vue组件的渲染步骤，compiler和render渲染的区别

在compiler渲染的过程中，会先将template转换成抽象语法树，在被编译成render函数，由这个函数构建出一个虚拟dom，由新老虚拟dom通过diff算法进行对比，找出最优化的变化方式去渲染整个界面。而render函数shenglue了前两个步骤，直接从render函数开始进行界面的渲染。之所以能跳过是因为render渲染添加了vue-template-complier插件。每当data的属性触发了set操作，则会进行render的重新渲染

20：ssr的概念

ssr就是服务器渲染，界面的形成由服务器那边进行操作，由前端进行渲染，是与vue渲染界面一种完全不同的方式

21：前端渲染的优化

尽量减少http请求的发出采用精灵图和节流防抖。组件的懒加载使用=》，还有better-sroller中上滑刷新，下滑加载的概念，不将数据一次全部渲染出来，js文件放在最后面，先加载静态界面。vue keep-active的使用，防止组件的多次重复创建，保证key的唯一性，尽量减少data中的数据

22：v-if和v-show的区别

v-show是调用了display：none来进行元素的显示或者隐藏，而v-if是操作dom节点的消失或者产生来进行变化

23：ref是什么，有什么作用

标记dom节点