超实用！！Vue面试题合集

超实用！！Vue面试题合集

这篇文章是针对Vue的面试题整理，答案是从官网或者大神的回答结合自己理解得出的。
如果有什么不对或者需要探讨的地方，可以尽管私聊哦！！！
希望大家都可以找到一份合适的工作，也希望我的文章可以帮助到你！

Vue的核心

• 什么是MVVM？

M（Model数据模型 ）- V（View视图）- VM（ViewModel视图模型）

在MVVM架构下，View和Model没有直接联系，通过ViewModel进行交互。ViewModel通过数据双向绑定将View和Model层连接起来。

• Vue 实现数据双向绑定的原理是什么？

通过Object.defineProperty( )对属性设置一个set函数，当数据改变了就会来触发这个函数，所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。

• MVVM和MVC的区别？
  MVVM：通过ViewModel双向数据绑定。
  MVC：通过controller单向控制。

• 说下使用Jquery和Vue的区别？
  Vue：虚拟操作DOM元素，前后端分离，只需要关心数据即可。
  Jquery：使用选择器$操作DOM，进行取值、赋值操作，实质上只是更方便的获取操作元素。

• Vue的核心特性是什么？
  1、数据驱动视图
  2、组件化开发

• Vue的实现流程？
  1、解析模板触发render函数
  2、响应数据开始监听（object.definepropty）
  3、初始化数据，显示页面，绑定依赖
  4、数据改变触发rerender函数，更新视图

• Vue的优缺点？
  优点：
  1、轻量级框架
  2、灵活使用第三方库
  3、组件化开发效率高
  4、前后端分离，可维护性高
  缺点：
  1、不支持IE8
  2、生态环境差

Vue的生命周期

• 什么是生命周期？
  vue实例从创建到销毁的过程叫做生命周期。从开始创建，初始化数据，编译模板，挂载DOM-》渲染-》更新-》销毁等过程，称之为生命周期。

• 生命周期的作用是什么？
  生命周期中每阶段都有钩子函数，可以控制整个实例的流程时，形成更好的逻辑。

• 详细说一下每阶段都做了什么？

创建前beforeCreate:
初始化实例，还未进行数据监测，未获得dom节点。
创建后created：
实例创建之后完成数据初始化导入依赖。
载入前beforeMount：
实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
载入后mounted：
完成挂载和渲染。这时向后端发请求，拿数据。
更新前beforeUpDate：
在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。
作数据，会导致死循环
销毁前beforeDestroy：
在实例销毁之前调用。实例仍然完全可用。可以做一些删除提示
销毁后destroyed ：
在实例销毁之后调用。所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

• 第一次渲染时触发了那几个函数？
  创建前，创建后，载入前，载入后。
• DOM渲染在哪个周期就已经完成了？
  载入后mounted中已完成。

Vue Router路由

• 路由的跳转方式有几种？

1. 声明式：<router-link :to='定义链接'>
2. 编程式：this.$router.push

• 路由的两种模式？
  1.hash模式 —— 即地址栏 URL 中的 # 符号，vue-router默认hash模式。
  特点：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
  2.history模式 —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
  当使用history模式时，url就像正常的url, 例如http://abc.com/user/id相比hash模式更加好看。特别注意，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。
• 什么是前端路由？
  前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。
• hash模式和history模式区别
  1.pushState()设置新的url可以是和当前url同源的任意url;hash只可修改#后面的部分，只能设置当前url同文档的url。
  2.pushState()设置的新url可与当前url一致，这样也会把记录添加到栈中；hash必须设置与当前url不同的url的，才会触发动作将记录添加到栈中。
  3.pushState()通过stateObject参数可以添加任意类型的数据到记录中；hash只可添加短字符串。
  4.pushState()可额外设置title属性供后续使用。
  注意：
  history模式下，前端的url必须和实际向后端发起请求的url一致，如http://abc.com/user/id,后端如果没有对user/id的路由处理，将返回404错误。
• 怎样设置动态路由？
  router-link中的to属性，:to ,
• 怎样设置路由拦截？
  定义路由时多加一个自定义字段requireAuth,用来判断访问该路由是否要登录，定义完路由以后，利用vue-router的钩子函数beforeEach来对路由进行判断。

VueX状态管理

Vue单页面应用的优缺点？
优点：
1、不需要反复刷新，用户体验好
2、前后端分离
3、组件可复用、开发便捷、易维护
缺点：
1、不利于SEO
2、首屏加载慢
3、页面复杂度提高
Vue单页面应用SPA性能如何优化？
1、路由懒加载
当路由被访问时，才加载对应的组件。

• 官网推荐写法：

routes:[ 
 		path: 'Blogs',
 		name: 'ShowBlogs',
 		component: () => import('./components/ShowBlogs.vue')
 	]

• Vue异步组件实现路由懒加载

const component：resolve=>require('需要加载的路由地址'，resolve)

2、CDN
Vue项目会引入很多第三方库，使用CDN会提升加载速度。
3、利用服务端渲染（SSR）和预渲染（Prerender）来优化加载性能