vue面试题，vue面试题及答案100题

大家好，今天来为大家分享vue面试题的一些知识点，和vue面试题及答案100题的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

面试题(2020)Vue面试题汇总

面试题（2020）Vue面试题汇总

本文涉及的资料来源于互联网整理与个人经验总结，旨在帮助个人学习与经验汇总。如涉及侵权，请联系本人删除，感谢。

1、对于MVVM的理解

MVVM是一种设计模式，即Model-View-ViewModel的缩写。其中，Model代表数据模型，用于定义业务逻辑与数据；View负责展示UI，通过ViewModel将数据转换为UI界面；ViewModel作为中间层，监听Model的变化，并控制View的行为与交互，实现数据与界面的双向绑定。在MVVM架构下，View与Model之间不直接交互，而是通过ViewModel来连接，实现数据与界面的自动同步。

2、vue实现双向数据绑定

Vue实现双向数据绑定的核心在于数据劫持与发布者-订阅者模式。通过`Object.defineProperty`劫持对象的getter与setter，实现对数据变化的实时监听与响应。当数据变化时，触发视图更新，实现数据与视图的实时同步。

此外，Vue整合Observer、Compile和Watcher，通过Observer监听Model变化，Compile解析模板指令（如`{{}}`），最终由Watcher搭建起Observer与Compile之间的通信桥梁，实现数据与视图的双向绑定。

3、Vue组件间的参数传递

父组件向子组件传递参数：通过`props`接收。子组件向父组件传递参数：使用`$emit`方法。

事件总线(Event Bus)提供了一个全局事件中心，用于在组件间传递事件，适用于项目规模较小的场景。

4、v-show与v-if的区别

`v-show`与`v-if`都是用于条件渲染，但`v-show`通过CSS的`display`属性切换元素的可见性，而`v-if`则是根据表达式的结果决定元素是否插入DOM。使用`v-if`渲染的元素在条件不满足时会被从DOM中删除，而`v-show`则始终保留元素。

5、Vue的生命周期

Vue实例生命周期包括：`beforeCreate`（创建前）、`created`（创建后）、`beforeMount`（载入前）、`mounted`（载入后）、`beforeUpdate`（更新前）、`updated`（更新后）、`beforeDestroy`（销毁前）、`destroyed`（销毁后）。每个阶段执行特定的任务，如数据初始化、DOM渲染、事件绑定等。

6、组件间数据传递

子组件向父组件传递数据：通过`$emit`触发事件。父组件监听事件响应数据变化。

使用`eventBus`实现组件间的事件通信，适用于较小项目。

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

两者用于条件渲染，`v-show`通过CSS控制元素可见性，`v-if`决定元素是否插入DOM，`v-if`的元素在条件不满足时被从DOM中删除，而`v-show`始终保留元素。

8、Vue与Angular以及React的区别

相同点：内置指令/过滤器、双向数据绑定、不支持低端浏览器。

不同点：Angular学习成本高，Vue提供更直观的API；性能上，Vue采用异步队列更新；React采用虚拟DOM进行检查。

9、事件修饰符

事件修饰符提供事件处理的增强功能，如`prevent`（阻止事件默认行为）、`stop`（阻止事件冒泡）等。

10、组件中data为什么是函数

组件中的`data`必须为函数，以便于复用组件实例时数据作用域的隔离，避免引用问题。

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

Vue框架以最少的职责提供强大的功能，允许开发者根据需求选择性地使用，既可作为轻量视图，也可构建完整的应用程序。

12、Vue.js的两个核心

数据驱动与组件化。

13、Vue中key的作用

使用`key`作为元素的唯一标识，用于高效更新虚拟DOM，并在组件过渡切换时区分元素。

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

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

15、组件

组件间方法调用、数据传递与Vue Router的动态路由、路由守卫、组件间传值与动态组件使用。

16、Vue Router动态路由与传参

使用动态路径参数，通过`$route.params`获取动态参数值。

17、Vue Router的路由守卫

路由守卫包括`beforeRouteEnter`、`beforeRouteUpdate`、`beforeRouteLeave`等，用于控制路由的访问。

18、$route与$router的区别

$route提供当前路由的详细信息，$router是Vue Router的实例，用于执行路由相关操作。

19、Vue Router响应路由参数变化

通过监听路由变化，使用`$route`的`$on`方法，响应参数变化。

20、Vue Router传参

使用`params`、`query`进行参数传递。

21、使用Vuex的问题

可维护性下降、可读性降低、增加耦合度。

22、Vuex的属性与特性

State、Getter、Mutation、Action、Module。

23、Vuex的State特性

用于存储全局共享的数据。

24、Vuex的Getter特性

用于计算状态数据，简化复杂逻辑。

25、Vuex的Mutation特性

用于定义状态变更的操作。

26、Vue.js中的AJAX请求

编写在组件的`methods`中或`Vuex`的`actions`中。

27、Vue双向数据绑定原理与不同点

Vue通过数据劫持与发布-订阅模式实现双向绑定，Vue3.0支持更广泛的数据类型监测，如数组与动态属性。

vue面试题大全

1. vue生命周期都有哪些？

2.进入页面会执行哪些生命周期函数

beforeCreate、created、beforeMounted、mounted

3.在哪里可以访问 data

beforeCreate中不可以访问

created中有 el

beforeMounte中有 el

mouted中都有，包括之后的生命周期钩子函数都有

4、如果加入了keep-alive会增加两个生命周期函数

activated和deactivated

进入页面的时候触发activated，离开页面触发 deactivated

5.如果加入keep-alive组件，第一次进入页面会触发哪些生命周期

beforeCreate、created、beforeMounted、mounted、activated

6、如果加入了keep-alive组件后，第二次或第n次进入页面会触发哪些生命周期？

只触发一个生命周期：activated(因为该页面已经被缓存起来了)

1.是什么

vue自带的一个组件，用来缓存组件，提升性能，keep-alive可以在组件切换时，保存其包裹组件的状态，使其不被销毁。

2、参数

include：表示只有匹配的组件才会被缓存；

exclude：表示匹配到的组件不会被缓存；

3、生命周期

有两个生命周期函数，同上

4.使用场景

-列表页面跳转详情页的时候，用户通过点击跳转，那么详情页每次都要去请求数据，如果用户每次点击的都是同一个，那么详情页就没必要去重新请求，直接缓存起来就行了，如果点击的不是同一个再重新发起请求；

-在router-view上使用可以缓存路由组件；

1.相同点

都可以控制元素的显示隐藏

2.区别

v-if通过创建/销毁dom元素来控制元素的显示隐藏，v-show通过css属性的display:none来控制元素的显示隐藏

3.场景

频繁切换使用v-show，会节省性能，反之使用v-if

1、当项目使用keep-alive时，可搭配组件name进行缓存过滤

当我们使用keep-alive缓存组件时，被缓存组件中的mounted函数只会执行一次，第二次进入页面不会重新触发，有两种解决方法，一种是使用activated()，在里面进行mounted中的操作；另一种就是在keep-alive中增加一个过滤，如下所示：

exclude属性就是要忽略匹配到的组件。

2、DOM做递归组件时；

当组件需要自己调用自己的时候

3、使用vue-tools时；

vue-devtools调试工具里显示的组件名称是由vue中组件name决定的

v-for的优先级比v-if的优先级高，这是在源码中规定好的，并且v-for和v-if不可以同时使用，同时使用会很浪费性能，比如明知判断条件是false的情况下，还需要去遍历一下数据，所以通常我们会把v-if放在v-for的外面。

是用来获取更新后的dom内容，并且该方法是异步的

作用是将回调函数延迟到下次dom更新循环之后执行因为vue更新数据是异步的，修改data中的数据，视图不会立刻更新，vue会将你对data的修改放到一个watch队列中，当同一事件循环中的所有数据更新完以后，再进行试图更新，所以会产生延迟。

最常见的使用场景就是，在created中获取dom元素的时候需要使用$nextTick获取

组件中的 data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，相当于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果。

当父组件给子组件传递数据的时候，子组件只允许对数据进行读取，不允许修改数据，因为当子组件修改了父组件传过来的数据时，其他引用父组件数据的组件也会被修改，从而导致报错，然而也不知道是当前组件报错还是父组件报错还是修改父组件信息的子组件的错误；

如果要修改可以通过this.$emit方法派发自定义事件，在父组件中修改；

hash模式和history模式，默认是hash模式

区别如下：

1、表现形式不同，hash使用#表示，history用/表示；

2、hash值不会发送到服务端，history会发送到服务端，如果没有匹配到对应的路由，需要配置对应的页面；

3、获取方式不同，hash值可以通过location.path获取，history通过location.pathname获取；

4、hash可以通过window.onhashchange监听hash值的改变，history

可以通过onpopstate监听变化；

组建中的template标签会编译为render函数，通过render函数创建出dom元素，然后转化为虚拟dom最终转化为真实dom

1、虚拟dom是一个js对象，用对象属性来描述节点，是一层对真实dom的抽象

2、因为dom的执行速度远不如js执行速度快，因此将真实的dom抽象成js对象，然后通过算法计算出真正需要更新的节点，从而减少了大量的dom操作。

3、将直接操作dom转换成了两个js对象中去比较，找出差异项，做局部更新，提高了执行效率。

未完待续...

有关vue的常见面试题(上)

防抖：一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

例：防抖经常用在我们搜索框输入搜索，点击提交，防止等；

节流：一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。

例：节流一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力

盒模型的组成：元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border

盒模型分为： W3C标准盒子、IE盒子

W3C标准盒子（content-box）：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型，盒子总宽度= margin+ border+ padding+ width

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型，盒子总宽= margin+ width

1.toString()与join()一样都是把数组转成以逗号分割的字符串

2.pop()删除数组的最后一项

3.push()往数组最后添加新数据

4.shift()删除数组最前面的一项

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

const定义的变量不可以修改，而且必须初始化

let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1.都支持服务器端渲染

2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范

3.数据驱动视图

4.都有支持native的方案,React的React native,Vue的weex

5.构建工具

React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App(CRA)，而Vue对应的则是vue-cli。都有管理状态，React有redux,Vue有自己的Vuex

设计思想

react

1.函数式思想，all in js,jsx语法，js操控css

2.单项数据流

3.setState重新渲染

4.每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。

vue

1.响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中

2.双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要）

3.Vue宣称可以更快地计算出虚拟 DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树

性能

react----大型项目、优化需要手动去做，状态可控

vue------中小型项目、状态改变需要watch监听，数据量太大的话会卡顿

扩展性

react

1类式写法api少，更容易结合ts

2可以通过高阶组件来扩展

vue

1声明式写法，结合ts比较复杂

2需要通过mixin方式来扩展

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach

导航钩子3个参数(to,from,next):

到达这个组件时：

离开这个组件时：beforeRouteLeave:(to,from,next)=>{}

确认离开next();取消离开next(false)；

beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

方法一：

子组件绑定一个事件，通过 this.$emit()来触发

在子组件中绑定一个事件，并给这个事件定义一个函数

在父组件中定义并绑定 handleChange事件

方法二：

通过 callback函数

先在父组件中定义一个callback函数，并把 callback函数传过去

在子组件中接收，并执行 callback函数

方法三：

通过$parent/$children或$refs访问组件实例

这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

这种方式的组件通信不能跨级

方法四：

$attrs和$listeners

关于vue面试题的内容到此结束，希望对大家有所帮助。