vue基础面试题

1、路由的跳转模式有哪些，有什么不同

有两种模式 分别是 hash 和 history 默认使用 hash 模式如果需要转换成 history 模式，需要在路由的配置中添加一个 mod 属性，值改写成history , hash 模式在 url 路径上会有一个 #，而 history 模式没有，但是如果在项目中想要使用 history 模式，一般需要后台设置对应模式的接口

 

 

 

2、路由的跳转方法有哪些，有什么不同

push( ) 方法与 replace( ) 方法、 pushState( ) 方法、 replaceState( ) 方法

如果使用的是hash模式进行路由跳转，我们可以使用push方法和replace方法，

如果使用的是history模式进行路由跳转那么跳转方式会新增两个H5中history对象 的方法pushState方法和replaceState方法。

push方法在跳转时会添加一条新的路径，会产生历史记录

replace方法在跳转时是对当前路径进行替换，不会产生新的历史记录

 

 

 

3、路由的传参方式有哪些，有什么不同

传参方式有两种分别是params与query

params这种方式适合动态路由传递参数，因为在动态路由使用该方式传递参数刷新页面时参数不会丢失，而静态路由一旦使用这种方式传递刷新页面后参数就会清除消失

query这种方式适合静态路由传递参数，因为在静态路由使用该方式传递参数在刷新页面时参数不会丢失

params类似于post方式而query类似于get方式

params可以使用name引入路由，query可以使用name/path引入路由

 

 

 

4、路由的导航守卫有几种，分别有哪些钩子函数

有三种导航守卫：

全局路由守卫

beforeEach()：全局前置守卫，在进入到某一个路由之前会触发这个函数

afterEach()：全局后置守卫，在进入到某一个路由之后会触发这个函数

beforeResolve()：全局解析守卫，在进入到某一个路由之前，同时将进入到的路由组件解析完成后触发这个函数，类似于前置守卫

 

路由独享守卫

beforeEnter()：在进入到当前路由之前会触发这个函数

 

组件内的守卫

beforeRouteEnter()：在路由进入到该组件之前触发这个钩子函数

beforeRouteUpdate()：在路由的url路径上通过动态路由实现路径的变化，但是该组件重复复用时，会被触发。比如home/张三跳转到home/李四，这个时候函数会被触发

beforeRouteLeave()：在路由离开这个组件之前触发钩子函数

 

 

 

5、路由导航守卫的解析流程简单叙述

先在失活组件调用beforeRouteLeave

执行beforeEach

如果是组件重用则会调用 beforeRouteUpdate

执行路由独享的beforeEnter

在激活组件调用beforeRouteEnter

执行beforeResolve

执行afterEach

触发DOM更新

 

 

 

6、如何使用嵌套路由

在路由表的配置对象中添加一个children属性，来配置路由，然后在与之对应的组件中使用router-view来渲染

 

 

 

7、keep-alive组件的作用是什么？

将被keep-alive组件包裹的内容进行缓存处理，后期如果再次使用该内容，则不会重新初始化，而是从缓存中提取，这样就会减少DOM的渲染，提高页面的整体加载效率

 

 

 

8、如何实现路由页面中部分页面的缓存处理

用keep-alive标签上设置include属性或者exclude属性来控制

 

 

 

9、路由的懒加载模式和普通路由模式对比有什么优势

路由懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。 使用懒加载的原因： vue 是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验。

 

懒加载是通过函数的形式来引入路由组件 ()=>import(“组件路径”)

 

 

 

10、写出vuex中的五大核心是什么

state：单一状态树，用于存储状态

mutations：用于保存所有的同步方法，是唯一可以修改state状态的地方

actions：用于保存所有的异步方法，里面封装了promise，使用时可以使用.then进行回调处理

getters：用于计算属性，当需要对state中的状态进行计算处理时，可以使用

modules：如果vuex中的状态过多，可以利用模块化进行管理

 

 

 

11、简述一下mutations和actions的区别

mutations是处理同步方法，actions是处理异步方法，

mutations可以修改state状态，actions不能修改，

mutations中第一个参数是state，actions中第一个参数是vuex的实例，

mutations中的方法中无法使用then来监听回调，actions中的方法可以使用then来监听回调

 

 

 

12、如何对vuex中的数据进行缓存，也叫持久化

使用vuex中的第三方插件 vuex-persistedstate

在该插件的配置中可以使用storage属性来控制存储的方式，默认是本地存储，可以更改为会话存储，或者cookie存储

 

 

 

13、在vue中如何使用element-ui，简述一下使用流程

通过npm进行下载安装

在main.js中引入elementui插件及样式

在main.js中通过Vue.use( )来使用该插件

之后就可以使用对应的elementui组件

 

 

 

14、简述vue的生命周期函数有哪些，分为有keep-alive时和没有keep-alive时两种情况

vue的生命周期有四个大的阶段分别是创建、挂载、更新、销毁，在每一个阶段中都有两个生命周期函数，分别是：

beforeCreate( ) 初始化前

Created( ) 初始化后

beforeMount( ) 挂载前

Mounted( ) 挂载后

beforeUpdate( ) 更新前

Updated( ) 更新后

beforeDestory( ) 销毁前

destoryed( ) 销毁后

如果组件被keep-alive缓存后，会多出两个生命周期函数分别是activated与deactivated

 

 

 

15、简述一下在vue中组件之间都可以使用什么方式进行传值操作

可以使用组件通信，父传子，子传父，事件总线传递，还可以通过路由进行传递参数，也可以使用vuex来集中管理组件之间的数据，也可以直接利用本地存储来进行传递

 

 

 

16、父子组件之间的通信如何传递的，父传子及子传父都要写

父传子：首先在父组件的子组件标签上定义一个自定义属性，属性值就是希望传递给子组件的数据，然后在子组件的配置中添加一个props属性，用于接收父组件传递过来的数据，接收完之后就可以在子组件的页面中使用该数据

子传父：子组件要触发一定的事件条件，在函数内部通过 this.$emit() 向父组件发出一个自定义事件（emit 方法中可以传递两个参数，第一个参数是自定义的事件名，第二个参数是传递给父组件的数据）在父组件的子组件标签上，通过v-on来绑定子组件发出的自定义事件为该自定义事件添加一个事件响应函数，该函数有一个默认参数，参数就是传递过来的值

 

 

 

17、vue中的常用指令有哪些

v-bind、v-model、v-on、v-for、v-on、v-if、v-show

 

 

 

18、v-if和v-show的区别是什么

v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;

v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

性能：

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗

 

都可以动态控制着dom元素的显示隐藏

 

v-if通过DOM来进行显示隐藏的，v-show通过css进行显示隐藏的

在标签需要频繁进行显示与隐藏的切换时 使用v-show

在标签不是很活跃，只是偶尔需要显示时，用v-if

 

 

 

19、组件中的data为什么必须是一个函数而不是对象

因为对象是一个引用数据类型，而我们的组件是可复用的，一旦复用，对象的数据是直接引用对象地址，这样的话所有的组件数据会互通，一个改变另外的其他组件也会收到影响，不利于组件的复用，而如果将data改写成函数，返回一个新的对象，这种语法会让组件每一次使用的时候都生成一个数据自己的全新对象，这样每个组件中的数据一旦发生改变，其他组件不会收到任何影响，利于组件的复用

 

 

 

20、简述vue的双向数据绑定原理

vue.js是采用数据劫持与发布者、订阅者的模式的方式，通过defindproperty()来劫持各个属性的getter、setter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染页面