2020年Vue面试题汇总_vue 2020年面试题

理论篇

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

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

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

数据驱动和组件化。

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

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

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

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

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

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

语法篇

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

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常用的修饰符

修饰符讲解

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

可以
监听多个方法

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高。

组件篇

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

子调用父方法
子组件中通过this.$parent.event来调用父组件的方法

在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了
父组件把方法传入子组件中，在子组件里直接调用这个方法

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

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

3、vue组件之间传值

父组件给子组件传值
***父组件调用子组件的时候动态绑定属性

<parent :dataList='dataList'></parent>
1

***子组件定义props接收动态绑定的属性props: [‘dataList’]
子组件主动获取父子间的属性和方法
子组件使用this.$parent.属性/this.$parent.方法。
子组件给父组件传值
父组件 this.$refs.parent.属性/方法或者$emit方法
----子组件调用this.$emit('方法名‘,传值)
----父组件通过子组件绑定的’方法名’获取传值。
vue页面级组件之间传值
1.使用vue-router通过跳转链接带参数传参。
2.使用本地缓存localStorge。
3.使用vuex数据管理传值。
说说vue的动态组件
动态组件
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的 名称，那么页面就会显示哪个组件。
主要考查面试这 component的 is属性
keep-alive内置组件的作用
可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中
递归组件的用法
递归组件使用
递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。

路由

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

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

{
  path: '/details/:id'

  name: 'Details'

  components: Details

}
1
2
3
4
5
6
7
8

访问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响应路由参数的变化

(1)用watch 检测

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

5、vue-router 传参

query&&params

vuex

vuex