vue面试汇总

1、vue的最大优势？

比较轻量 中国人自己写的框架 文档易懂

实现数据双向绑定、数据驱动视图、组件化开发、数据和视图分离、单页面应用可以实现页面数据局部更新

2、MVVM和MVC的区别

MVC：一种传统的设计模式（分层架构思想，后端），即数据、视图、控制器

MVVM：vue采用的设计模式（数据双向绑定模式。由MVC演变而来），实现数据自动双向同步，无需操作dom

3、vue常用修饰符

.stop：阻止事件冒泡

.prevent：阻止默认事件（表单的提交）

.once：事件只能触发一次

.capture：事件捕获

.self：e.target是自身才会触发（即触发事件和绑定事件是同一元素）

.enter：监听键盘enter键

4、对vue渐进式的理解

使用模块化规范，实现自助餐式开发，用什么导什么，最大程度上节约资源

5、vue的指令及作用

v-on：给标签绑定函数（缩写为@）

v-bind：动态绑定（缩写为:）

v-slot：插槽（缩写为#）

v-for：循环

v-show：

v-if：

v-else：

v-text：解析文本

v-html：解析html标签

6、为什么要避免v-for和v-if在一起使用

v-for的优先级比v-if高，一起只用时会像遍历再判断，性能低

解决方案：外加template判断

7、v-if和v-show的区别

相同点：当两者为true时显示，false时隐藏

不同点：v-show一定会渲染，只是修改display属性；v-if根据条件渲染

8、vue中key的作用（高效渲染，提高性能）

key是虚拟DOM对象的标识，当状态中的数据变化时，vue会根据新数据生成新的虚拟DOM，

通过key新旧虚拟dom进行对比，从而决定节点是否重新加载以及复用

若虚拟dom中内容没变，则直接使用之前的真实dom

若虚拟dom中内容变了，则生成新的真实dom，替换掉之前的dom

9、v-for指令使用key值的几种情况

1、没有key值（默认下标）：不复用，就地更新

2、key值为下标：不复用，就地更新

3、key值为id：复用相同的key，更新不同的key

10、vue中：key作用，为什么不能用索引

因为v-for数据项顺序的改变，vue也不会移动DOM元素来匹配数据项顺序，而是就地更新每个元素

11、vue中有时候数组会更新页面，有时候不更新，这是为什么？

因为vue内部只能监测到数组顺序/位置的改变/数量的改变，但是值被重新赋予监测不到。可以用Vue.set()/vm.$set()实现

一下方法会触发数组的改变，v-for会监测到并更新页面

push() 添加元素到数组最后

pop() 删除数组最后元素

shift() 删除数组最前元素

unshift() 添加元素到数组最前

splice() 从某个下标开始删除指定数量元素

reverse() 翻转数组

12、计算属性和监听器的区别

1、计算属性有缓存机制，监听器没有

2、计算属性不支持异步操作，监听器支持异步操作

3、计算属性是一个额外新增的属性，监听器只能监听data中的属性

4、计算属性有返回值return，监听器不需要return

5、计算属性可以监听多个数据变化（计算属性内部用到的数据变化了，就会执行计算属性方法，监听器只能监听一个数据变化）

13、说一说封装vue组件的过程

写好组件用export default导出，在main.js文件里引入并使用vue.component()全局注册，或者在其他组件文件内引入，并在vue配置项的components里定义

14、vue组件传值

父传子：父组件中在使用子组件时通过行内属性传值，子组件props接收（单向数据流）

子传父：使用子组件时用@自定义时间名=父组件中的方法（事件监听），子组件使用$emit触发父组件方法

非父子：vuex

15、vue组件中的data为什么必须是函数？

为了组件复用时生成新的对象，数据互不影响。不然如果data是个对象，对象是应用类型，一旦一个地方修改就会全部修改

16、组件命名规范

链式命名：my-component

大驼峰命名：MyComponent

17、scoped作用与原理

作用：组件css作用域，避免组件内部样式被父组件覆盖

18、vue的声明周期

四阶段：

创建前/后

挂载前/后

更新前/后

销毁前/后

八大钩子函数

19、vue中nextTick的原理是什么？

a、为什么需要nextTick？

vue是异步修改dom并且不鼓励开发者直接接触dom，但有时业务需要必须对数据更改刷新后的dom做处理

nextTick等待下一次dom更新结束后再执行

nextTick底层是promise，所以是微任务，原理就是vue通过异步队列控制dom更新

20、v-slot插槽与作用域插槽

概念：子组件提供给父组件的一个赞占位符

插槽作用：父组件传递html结构给子组件

具名插槽（<slot name="child1"></slot>  <template v-slot="child1"></template>）：父组件传递多个html结构给子组件

作用域插槽(带数据的插槽，即带参数的插槽，<slot :data="data"></slot> <Child><template slot-scope="slotProps.data"></template></Child>)：父组件给子组件传递插槽时，可以使用子组件内部的数据

21、自定义指令的方法有哪些？它有那些钩子函数

全局定义指令：vue对象的directive方法，两个参数（指令名称，函数），组件内定义指令：directives

钩子函数：bind（绑定事件触发）、inserted（节点插入时触发）、update（组件内相关更新）

钩子函数参数：el、binding

22、vue路由作用和原理

作用：实现单页面应用，同个页面根据路由hash值渲染不同内容

原理：监听location的hash值

23、路由间怎么跳转的？有哪些方式？

声明式跳转：router-link

编程式跳转：this.$router.push()、this.$router.replace()、this.$router.go()

24、vue-router怎么配置路由（路由配置六个流程）

1、引入组件

2、创建路由对象router

3、配置路由path和组件，生成路由对象routes

4、将路由对象挂在到vue实例上

5、页面使用<router-view></router-view>承载路由

6、<router-link to='要跳转的路由'></router-link>设置路由导航

25、vue-router的钩子函数有哪些（导航守卫）

A、全局钩子beforeEach、beforeResolve、afterEach(全局前置守卫，所有路由生效)

B、路由独享守卫beforeEnter（可直接配置在路由上，只对这个路由生效）

C、组件内钩子（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）

26、路由传值方式有哪几种

a、/path?key=vlaue

b、/path/value

c、this.$router.push({path:'/path',query:{key:value}})

d、this.$router.push({name:'com',params:{key:value}})

27、vue路由实现模式：hash模式和history模式

a、路径不同

hash带# history不带#

b、工作模式不同

hash：修改当前页面hash 不需要服务器额外配置

history：会给服务器发送请求，需要服务器配置

28、请说出路由配置项常用的属性及作用

路由配置参数：

path：跳转路由

component：路由相应组件

name：命名路由

children：子路由配置参数（路由嵌套）

props：路由解耦（组件可以复用，但是路由给子组件传值后通过$route获取参数会导致子组件无法复用，因此用到props解耦）

redirect：重定向路由

29、$route和$router的区别

routes：数组，路由配置规则

router：对象，路由独显

$router：对象，用于跳转路由和传递参数

$route：对象，用于接收路由跳转参数

30、跟keep-alive有关的生命周期是哪些？

在开发vue项目时，大部分组件没必要多次渲染，所以vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。

被keep-alive包含的组件/路由中，会多出两个生命周期钩子：activated、deactivated

activated:组件第一次渲染时会被调用，之后再每次缓存组件被激活时调用

deactivated:组件被停用（离开路由）时调用

31、vuex作用及五大组成部分

作用：全局数据管理、解决组件间复杂传参问题

组成：

state：存储数据

getter：派生数据，相当于state的计算属性

mutations：修改state中的数据

actions：异步更新数据

module：模块化vuex数据

32、vuex中action工作流程

a、组件给actions发送消息

b、actions异步请求数据

c、actions将请求到的数据提交给mutations

d、mutations同步更新state中的数据

33、vue中踩过的坑

1、v-for和v-if不能同时使用

2、向对象新增属性，属性值变化视图未刷新，要使用$set设置

3、created中操作dom报错，找不到对应dom，使用nextTick解决该问题