2020年Vue面试题汇总

旧城等待， 2023-07-03 06:25 31阅读 0赞

>  
> 
> 2020年Vue面试题
> 
> Interview
> 
> ●●●●
> 
> 作者：@烦恼会解决烦恼
> 
>  
> 
>

![format_png][]

vue核心知识——理论篇

1、对于Vue是一套渐进式框架的理解

渐进式代表的含义是：主张最少。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。   
渐进式的含义，我的理解是：没有多做职责之外的事。

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

数据驱动和组件化。

3.vue生命周期钩子函数有哪些？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。具体执行流程查看下图。

![format_png 1][]

4.vue 的双向绑定的原理是什么？

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程：

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

流程图如下：

![format_png 2][]

![format_png][]

vue核心知识——语法篇

1.请问 `v-if` 和 `v-show` 有什么区别？

相同点： 两者都是在判断DOM节点是否要显示。

不同点：

a.实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。  v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；  v-show只是简单的基于css切换；

c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换；  v-show有更高的初始渲染消耗，适合做频繁的额切换；

2、vue常用的修饰符

a、按键修饰符

如：.delete（捕获“删除”和”退格“键）      用法上和事件修饰符一样，挂载在v-on:后面，语法：`v-on:keyup.xxx=’yyy’  ``<inputclass = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>`

b、系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

*  .ctrl
 *  .alt
 *  .shift
 *  .meta

c、鼠标按钮修饰符

*  .left
 *  .right
 *  .middle  
    这些修饰符会限制处理函数仅响应特定的鼠标按钮。如：`<button @click.middle ="onClick">A</button>  `鼠标滚轮单击触发   *Click默认是鼠标左键单击*

d、其他修饰符

*  .lazy  
    在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步 ，我们可以添加 `lazy` 修饰符，从而转变为使用 `change`事件进行同步：

<inputv-model.lazy="msg" >

*  .number  
    如果想自动将用户的输入值转为数值类型，可以给 `v-model` 添加 `.number`修饰符：

这通常很有用，因为即使在`type="number"`时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 `parseFloat()`解析，则会返回原始的值。

*  .trim  
    如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<inputv-model.trim="msg">

![format_png 3][]

同样前面都有空格加上.trim后 将前后空格都去掉了。

3、v-on可以监听多个方法吗？

可以，例如：@click = "fn(),fn2()"     会依次执行方法

4、vue中 `key` 值的作用

使用key来给每个节点做一个唯一标识

**    key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

否则vue只会替换其内部属性而不会触发过渡效果。

5.Vue 组件中 data 为什么必须是函数？

在 `new Vue()` 中，`data` 是可以作为一个对象进行操作的，然而在 `component` 中，`data` 只能以函数的形式存在，不能直接将对象赋值给它。

当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

6、v-for 与 v-if 的优先级

v-for的优先级比v-if高。

7.说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)

v-for(把数据遍历出来)

v-bind(绑定属性)

v-model(实现双向绑定)

![format_png][]

vue核心知识——组件篇

1.vue中子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

第二种方法是在子组件里用`$emit`向父组件触发一个事件，父组件监听这个事件就行了。

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法。

2.vue中父组件调用子组件的方法

父组件利用ref属性操作子组件方法。

父：
    <child ref="childMethod"></child>
    子：
    method: {
      test() {
         alert(1)
      }
    }
    在父组件里调用test即 this.$refs.childMethod.test()

3.vue组件之间传值

(1)父组件给子组件传值：

1.父组件调用子组件的时候动态绑定属性
     <parent :dataList='dataList'></parent>

`2.子组件定义props接收动态绑定的属性props: ['dataList']        `

`3.子组件使用数据`

(2)子组件主动获取父子间的属性和方法：

在子组件中使用this.$parent.属性/this.$parent.方法。

（3）子组件给父组件传值：

一、使用ref属性

`1.父组件调用子组件时绑定属性ref`

`  <parent :ref='parent'></parent>`

`2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法`

`二、使用$emit方法`

`1.子组件调用this.$emit('方法名‘,传值)`

`2.父组件通过子组件绑定的'方法名'获取传值。`

（4）vue页面级组件之间传值

1.使用vue-router通过跳转链接带参数传参。

2.使用本地缓存localStorge。

3.使用vuex数据管理传值。

（5）说说vue的动态组件。

多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。

主要考查面试这 component的 is属性。

（6）keep-alive内置组件的作用

可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中

(7)递归组件的用法

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。

![format_png][]

vue核心知识——路由

1.怎么定义vue-router的动态路由？怎么获取传过来的值？

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

path: '/details/:id'

name: 'Details'

components: Details

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

this.$route.params.id

2.vue-router有哪几种路由守卫?

路由守卫为：  
全局守卫：beforeEach  
后置守卫：afterEach  
全局解析守卫：beforeResolve  
路由独享守卫：beforeEnter

3.$route和 $router的区别是什么？

$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

4.vue-router响应路由参数的变化

![image.png][]

*  (1)用watch 检测

*  (2)组件内导航钩子函数

![image.png][image.png 1]

5. vue-router 传参

(1)使用Params:

*  只能使用name，不能使用path
 *  参数会显示在路径上，刷新不会被清空

![image.png][image.png 2]

（2）使用Query：

*  参数会显示在路径上，刷新不会被清空
 *  name 可以使用path路径

![image.png][image.png 3]

![format_png][]

vue核心知识——vuex

**不用Vuex会带来什么问题？**

一、可维护性会下降，你要想修改数据，你得维护三个地方

二、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的

三、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

1.vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

2、vuex的State特性是？  
答：  
一、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data  
二、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新  
三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中  
  
  
3、vuex的Getter特性是？  
答：  
一、getters 可以对State进行计算操作，它就是Store的计算属性  
二、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用  
三、 如果一个状态只在一个组件内使用，是可以不用getters  
  
  
4、vuex的Action特性是？  
答：  
一、Action 类似于 mutation，不同在于：  
二、Action 提交的是 mutation，而不是直接变更状态。  
三、Action 可以包含任意异步操作  
  
  
  
5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？  
答：  
一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。  
二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。

![format_png 4][]

--------------------

![format_png 5][]

长按识别关注公众号

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tcHQuMTM1ZWRpdG9yLmNvbS9tbWJpei95cVZBcW9adkRpYkZud2hpYVRxV2RVTHNvTUZpY2Z2UU9DT2xNbEo0WU9CTGliaDhiVGJaUGJ0Ykt1aWNMY3lSUThUaWJCajJBc3pWU1BtUUhUNTU5eXJXZTlMQS8w?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzI2MzIwNi0xMDZiMjNkMTBkOGU5YmRmLnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTM4NjY0LzIwMTcwNS85Mzg2NjQtMjAxNzA1MjIyMjU0NTgxMzItMTQzNDYwNDMwMy5wbmc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy84OTE1MDMyLTgxZDZjODNmYzU5MDIxNjMucG5n?x-oss-process=image/format,png
[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9mVnd4SGpaVl9tN2p3LnBuZw?x-oss-process=image/format,png
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9GZDh6Yld4SF8zVHNLLnBuZw?x-oss-process=image/format,png
[image.png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi80WFpKMk83WV9JQnVxLnBuZw?x-oss-process=image/format,png
[image.png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi84RXlEWHFDVF92S1ZBLnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTU0MDQ3NS8yMDE4MTEvMTU0MDQ3NS0yMDE4MTExOTE3MzgxNjYzNC0yMTIzMzIxNTY5LmpwZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi90RGg2ODMydl9NMnVTLmpwZw?x-oss-process=image/format,png