Vue面试题总结

1、组件间怎么传值，具体说说代码怎样实现

• 子传父：子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners
• 父传子：父向子传递数据是通过 props，
• 兄弟组件传值：bus，vuex
• 跨级父子通信：Bus；Vuex；provide / inject API、$attrs/$listeners

2、Vue双向绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

3、vue的生命周期(钩子函数)

beforecreate : 举个栗子：可以在这加个loading事件 created ：在这结束loading，还做一些初始化，实现函数自执行 mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

4、应该在vue的生命周期的什么阶段发出ajax请求，为什么

看实际情况，一般在 created 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted

5、vuex是什么？怎么使用？哪种功能场景使用它？

一个状态管理器,

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事务； 异步逻辑应该封装在action中。 在main.js引入store，注入。新建了一个目录store，….. export 。 场景有：单页应用中，组件之间的状态同步、音乐播放、登录状态、加入购物车

6、Vue路由守卫

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象
• from: Route: 当前导航正要离开的路由
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数，确保要调用 next 方法，否则钩子就不会被 resolved

7、常用的vue指令，Vue的自定义指令怎么做

常用的vue指令有v-if、v-show，v-for，v-model等等

//全局指令
Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

8、Vue登录流程？需要做什么验证

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1.直接登陆流程(登录是使用用户名与密码验证, 发送请求才需要在请求头带token)

• 首先判断是否第一次登录, 如果是第一次登陆，前端调后端的登陆接口，发送用户名和密码
• 如果不是第一次登陆, 浏览器会在缓存中查找token, 如果有token, 就
• 后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
  • 第一次验证通过 hash加密 (发送前) , 将密码转化为密文, 到服务器数据库对比 密码密文对比
• 前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
• 前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
  • 对于需要登陆后才能访问的页面可以添加路由守卫()
• 每次调后端接口，都要在请求头中加token，通常做法是在axios的请求库中，添加全局拦截器，将token设置在请求头中。
  • 拦截器:
• 后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
• 如果前端拿到状态码为401，就清除token信息并跳转到登录页面

9、讲一下MVVM中的vm工作流程

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

10、vue 和react的区别

1.监听数据变化原理不同
2.数据流不同
3.HOC和minixs
4.组件通信不同
5.模板渲染不同
6.框架本质不同
7.渲染过程不同

11、Vue里面的插槽

<slot>

是组件的一块HTML模板，父组件决定这块模板显不显示以及怎么显示。

位置由子组件自身决定（slot现在组件template的什么位置，父组件传过来的模板将来就显示在什么位置）

匿名插槽：只能有一个，可以放在组件的任何位置

12、Vue-cli2.0和Vue-cli3.0的区别

用vue-cli3.0版本创建的项目与2.0版本相比较，我们会发现，文件目录少了很多 eg：build、config，那么如何像vue-cli 2.* 之前关于端口号的配置、打包之后的路径的配置、图片的配置等，到哪里配置呢？？vue-cli 3.0 可以在项目的根目录下新建一个 vue.config.js 文件，之前繁琐的配置都可以在这里直接配置

3.0能直接运行单个组件

3.0有一个UI管理界面

安装了2.0版本，要先卸载

13、Vue的路由实现 || vue-router的原理

**hash模式：**在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取； 特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

**history模式：**history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。 history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。”

14、vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

15、对keep-alive 的了解

答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

16、DOM 和虚拟DOM的区别 以及你对于他们了解

DOM的本质：DOM是浏览器概念，浏览器从服务器端读取html页面，浏览器将html解析成一棵元素嵌套关系的dom树，用对象来表示页面上的元素，并提供操作dom对象的api。

虚拟DOM：框架概念，程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 )，为了实现页面元素的高效更新( 目的 )

虚拟DOM是真实DOM结构的映射，即一个数据集合

17、vue指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind

• bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
• inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
• update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
• componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
• unbind:只调用一次，指令与元素解绑时调用。

18、vue封装公共组件（通用组件）需要考虑到什么

1.组件通信

2.处理事件

3.插槽

4.样式独立

5.尽量不要使用vuex传参

19、父组件怎么调用子组件里的方法

在子组件上绑定ref=‘子组件名称’ 使用$refs.子组件名称.子组件方法名称 来调用

20、css只在当前组件起作用

style 标签上加上 scoped 表示 style里面的样式只在当前页面生效

21、v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

22、route和

$route和$

router的区别

答：route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而

router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

23、vue.js的两个核心是什么？

答：数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。

24、vue常用的修饰符？

答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

25、v-on 可以绑定多个方法吗？

答：可以 写法 v-on={方法一，方法二...方法x}

26、vue中 key 值的作用？

key的作用主要是为了高效的更新虚拟DOM

27、什么是vue的计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式

好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

28、vue等单页面应用及其优缺点

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。 缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

29、vue路由之间跳转

1.标签 router-link to=‘将要跳转的地址’

2.js this.$router.push('将要跳转的地址')

30、Vue中怎么实现跨域

1、打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { 
  '/api': {  //使用"/api"来代替"http://aa.com" 
    target: 'http://aa.com', //源地址 
    changeOrigin: true, //改变源 
    secure:false // 是否使用https
    pathRewrite: { 
      '^/api': '/api' //路径重写 
      } 
  } 
}

2、使用axios请求数据时直接使用“/api”

31、Vue首屏加载过慢的解决方法有哪些

原因:网速，首次加载需要加载所有组件以及组件内部的逻辑代码，组件内的js、css文件 图片 媒体文件

解决办法：1.vue-router 路由懒加载

2.按需引入组件

3.在首页价格loading的效果（用户方面）

32、vue项目的多语言处理

Vue已经有了这个多语种的插件，vue-i18n

35.分别简述computed和watch的使用场景

computed: 当一个属性受多个属性影响的时候就需要用到computed

​ 最典型的栗子： 购物车商品结算的时候

watch: 当一条数据影响多条数据的时候就需要用watch

​ 栗子：搜索数据

36.请说下封装 vue 组件的过程？

答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。

2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。 　　 　3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。 　　 　4. 封装完毕了，直接调用即可

37. vue-loader是什么？使用它的用途有哪些？

答：vue文件的一个加载器，将template/js/style转换成js模块。 用途：js可以写es6、style样式可以scss或less、template可以加jade等

38.axios及安装?

答：请求后台资源的模块。npm install axios --save装好， js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。

39.v-modal的使用。

答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作： v-bind绑定一个value属性； v-on指令给当前元素绑定input事件。

40.请说出vue.cli项目中src目录每个文件夹和文件的用法？

答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。

41.渐进式框架的理解

答：主张最少；可以根据不同的需求选择不同的层级；

42.v-if和v-for的优先级

答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。 如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

**43.**assets和static的区别

相同点：assets和static两个都是存放静态资源文件。

不同点：assets中存放的静态资源文件在项目打包时 ，会把打包后的文件放入static中，static中的文件在在没有打包时占用内存比较大 上传速度慢 然如果使用assets先打包放入static 然后再进行上传会快很多

44.vue和jQuery的区别

答：jQuery是使用选择器（）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：

("lable").val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM

45.引进组件的步骤

答: 在template中引入组件； 在script的第一行用import引入路径； 用component中写上组件名称。

46.delete和Vue.delete删除数组的区别

答：delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

47.Vue-router跳转和location.href有什么区别

区别：使用location.href='/url'来跳转，简单方便，但是刷新了页面；

Vue-router使用history.pushState('/url')，无刷新页面，静态跳转；

48.Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

答：Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

49.Vue2中注册在router-link上事件无效解决方法

答： 使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件

50.axios的特点有哪些

答：1.从浏览器中创建XMLHttpRequests；

2.node.js创建http请求；

3.支持Promise API；

4.拦截请求和响应；

5.转换请求数据和响应数据；

6.取消请求；

7.自动换成json。

8.axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送 params一般适用于get请求，data一般适用于post put 请求。

51.params和query的区别

答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.route.query.name和this.

route.params.name。 url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示 注意点：query刷新不会丢失query里面的数据 params刷新 会 丢失 params里面的数据。

52.vue更新数组时触发视图更新的方法

答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

53.第一次页面加载会触发哪几个钩子？

答：beforeCreate， created， beforeMount， mounted

54.vue常用的性能优化

(1)合理的使用 v-if v-show
(2)v-for 后面加key
(3)自定义事件 dom事件及时销毁
(4)合理使用异步组件
(5)合理使用keep-alive
(6)合理使用commputed
(7)data的层级不要太深
(8)使用ssr

55.vue中ref的作用

1.获取dom元素：this.$refs.box
2.获取子元素中data ：$refs.box.msg
3.调用子组件的方法：this.$refs.box.open()

56.路由模式有哪些

hash: history:
传参方式：query和params
接收参数：this.$route.params  this.$route.query

57.移动端适配

通过根元素<HTML>的font-size的大小，来控制整个html的字体大小，宽高，内外边距，等

58.为什么用vue开发

组件化开发  单页面路由 丰富API方法 双向数据绑定  单向数据流 易于结合UI库

59.BOM对象有哪些

1.widow
2.document
3.loaction
4.Navigator
5.screen
6.history

60.深拷贝和浅拷贝的区别

含义：假设a复制b，看a是否会发生改变，当b修改时，a发生改变则为浅拷贝，a没发生改变则为深拷贝。
深拷贝方法：
1.递归
2.json对象   JSON.parse(JSON.stringify())
3.JQ中的extend  jQuery.extend([deep], target, object1, [objectN])；