三十七个常见Vue面试题

映射关系简化，隐藏controllerMVVM在MVC的基础上，把操纵层隐藏掉了。

Vue不是一个MVVM框架，它是一个视图层框架。

ViewModal是一个桥梁，将数据和视图进行关联。

数组和对象类型的值变化的时候，经过defineReactive办法，借助了defineProperty，将所有的属性添加了getter和setter。用户在取值和设置的时候，能够进行一些操作。

缺陷：只能监控最外层的属性，假如是多层的，就要进行全量递归。

get里面会做依赖搜集（dep[watcher,watcher]）set里面会做数据更新（notify，通知watcher更新）

vue中对数组没有进行defineProperty，而是重写了数组的7个办法。分别是：

因为这些办法都会改变数组本身。

数组里的索引和长度是无法被监控的。

Vue初始化的时候，挂载之后会进行编译。生成renderFunction。

当取值的时候，就会搜集watcher，放到dep里面。

当用户更改值的时候，就会通知watcher，去更新视图。

那个咨询题的核心是怎么将template转换成render函数。

Vue的生命周期钩子是回调函数，当创建组件实例的过程中会调用相应的钩子办法。内部会对钩子进行处理，将钩子函数维护成数组的形式。

Vue的mixin的作用算是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions办法进行合并，采用策略模式针对不同的属性进行合并。假如混入的数据和本身组件的数据有冲突，采用本身的数据为准。

缺点：命名冲突、数据来源不清楚

newVue是一个单例模式，可不能有任何的合并操作，所以根实例不必校验data一定是一个函数。组件的data必须是一个函数，是为了防止两个组件的数据产生污染。假如基本上对象的话，会在合并的时候，指向同一个地址。而假如是函数的时候，合并的时候调用，会产生两个空间。

nextTick是一个微任务。

Vue的diff算法是平级比较，不思考跨级比较的事情。内部采用深度递归的方式+双指针方式比较

所以采用watcher+Diff算法来检测差异。

产生组件虚拟节点-创建组件的真实节点-插入到页面

属性更新会触发patchVnode办法，组件的虚拟节点会调用prepatch钩子，然后更新属性，更新组件。

先渲染异步占位符节点-组件加载完毕后调用forceUpdate强制更新。

正常的一个组件是一个类继承了Vue。

函数式组件，算是一个一般的函数。

要紧作用是为了实现批量传递数据。

provide/inject更适合应用在插件中，要紧实现跨级数据传递。

首先，v-for和v-if不能在同一个标签中使用。

先处理v-for，再处理v-if。

假如并且遇到的时候，应该思考先用计算属性处理数据，在进行v-for，能够减少循环次数。

在组件上用的v-model，是model和callback

在一般元素上用v-model，会生成指令，还可能因为不同的元素：

指令在什么时候会调用？

源码：

一般插槽是渲染后做替换的工作。父组件渲染完毕后，替换子组件的内容。

在模板编译的时候，处理组件中的子节点和slot标签

在创建元素的时候，用_t()办法办法来替换_v()的内容。

作用域插槽能够拿到子组件里面的属性。在子组件中传入属性然后渲染。

作用域插槽的编译结果：

Vue.use是用来使用插件的。我们能够在插件中扩展全局组件、指令、原型办法等。会调用install办法将Vue的构建函数默认传入，在插件中能够使用vue，无需依赖vue库

使用有两个场景，一个是动态组件，一个是router-view

这个地方创建了一个白名单和一个黑名单。表明哪些需要需要做缓存，哪些不需要做缓存。以及最大的缓存个数。

缓存的是组件的实例，用key和value对象保存。

加载的时候，监控include和exclude。

假如不需要缓存，直截了当返回虚拟节点。

假如需要缓存，就用组件的id和标签名，生成一个key，把当前vnode的instance作为value，存成一个对象。这算是缓存列表

假如设置了最大的缓存数，就删除第0个缓存。新增最新的缓存。

同时给组件添加一个keepAlive变量为true，当组件初始化的时候，不再初始化。

钩子函数有三种：

Vuex是特意为vue提供的全局状态治理系统，用于多个组件中的数据共享、数据缓存。

咨询题：无法持久化。

VUE基础面试题（3）

在实例初始化之后，数据观测(dataobserver)和event/watcher事件配置之前被调用。在当前时期data、methods、computed以及watch上的数据和办法都不能被访咨询

实例差不多创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(dataobserver)，属性和办法的运算，watch/event事件回调。这个地方没有nextTick来访咨询Dom

在挂载开始之前被调用：相关的render函数首次被调用。

在挂载完成后发生，在当前时期，真实的Dom挂载完毕，数据完成双向绑定，能够访咨询到Dom节点

数据更新时调用，发生在虚拟DOM重新渲染和打补丁（patch）之前。能够在那个钩子中进一步地更改状态，这可不能触发附加的重渲染过程

发生在更新完成之后，当前时期组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新，该钩子在服务器端渲染期间不被调用。

实例销毁之前调用。在这一步，实例仍然彻底可用。我们能够在这时进行善后收尾工作，比如清除计时器。

Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

能够在钩子函数created、beforeMount、mounted中进行异步请求，因为在这三个钩子函数中，data差不多创建，能够将服务端端返回的数据进行赋值。

能更快获取到服务端数据，减少页面loading时刻；

ssr不支持beforeMount、mounted钩子函数，所以放在created中有助于一致性；

Vue2--------------vue3

beforeCreate=setup()

created=setup()

beforeMount=onBeforeMount

mounted=onMounted

beforeUpdate=onBeforeUpdate

updated=onUpdated

beforeDestroy=onBeforeUnmount

destroyed=onUnmounted

activated=onActivated

deactivated=onDeactivated

errorCaptured=onErrorCaptured

47道基础的VueJS面试题(附答案)

1、什么是MVVM框架？它适用于哪些场景？

MVVM框架是一个Model-View-ViewModel框架，其中ViewModel连接模型Model）和视图（View）。

在数据操作比较多的场景中，MVVM框架更合适，有助于经过操作数据渲染页面。

2、active-class是哪个组件的属性？

它是vue-router模块的router-link组件的属性。

3、怎么定义Vue-router的动态路由？

在静态路由名称前面添加冒号，例如，设置id动态路由参数，为路由对象的path属性设置/:id。

4、怎么获取传过来的动态参数？

在组件中，使用$router对象的params.id，即$route.params.id。

5、vue-router有哪几种导航钩子？

有3种。

第一种是全局导航钩子：router.beforeEach(to,from,next)。作用是跳转前进行推断拦截。

第二种是组件内的钩子。

第三种是单独路由独享组件。

6、mint-ui是什么？怎么使用？

它是基于Vue.js的前端组件库。用npm安装，然后经过import导入样式和JavaScript代码。vue.use(mintUi)用于实现全局引入，import{Toast}from'mint-ui'用于在单个组件局部引入。

7、V-model是什么？有什么作用？

v-model是Vue.js中的一条指令，能够实现数据的双向绑定。

8、Vue.js中标签怎么绑定事件？

绑定事件有两种方式。

第一种，经过v-on指令，。

第二种，经过@语法糖，input@click=doLog()/。

9、vuex是什么？怎么使用？在哪种功能场景中使用它？

vuex是针对Vue.js框架实现的状态治理系统。

为了使用vuex，要引入store，并注入Vue.js组件中，在组件内部即可经过$ostore访咨询store对象。

使用场景包括：在单页应用中，用于组件之间的通信，例如音乐播放、登录状态治理、加入购物车等。

10、怎么实现自定义指令？它有哪些钩子函数？还有哪些钩子函数参数？

自定义指令包括以下两种。

它有如下钩子函数。

钩子函数的参数如下。

11、至少讲出vue.js中的4种指令和它们的用法。

相关指令及其用法如下。

12、Vue-router是什么？它有哪些组件？

它是Vue.js的路由插件。组件包括router-link和router-vIew。

13、导航钩子有哪些？它们有哪些参数？

导航钩子又称导航守卫，又分为全局钩子、单个路由独享钧子和组件级钧子。

全局钩子有beforeEach、beforeResolve(Vue2.5.0新增的)、afterEach。

单个路由独享钩子有beforeEnter。

组件级钩子有beforeRouteEnter、beforeRouteUpdate(Vue2.2新增的)beforeRouteLeave。

它们有以下参数。

14、Vue.js的双向数据绑定原理是什么？

具体步骤如下。

（1）对需要观察的数据对象进行递归遍历，包括子属性对象的属性，设置set和get特性办法。当给那个对象的某个值赋值时，会触发绑定的set特性办法，因此就能监听到数据变化。

（4）MVVM是数据绑定的入口，整合了Observer、Compile和Watcher三者，经过Observer来监听自己的model数据变化，经过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化通知视图更新的效果。利用视图交互，变化更新数据model变更的双向绑定效果。

15、请详细讲明你对Vue.js生命周期的理解。

总共分为8个时期，分别为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroyed、destroyed。

当使用组件的kep-alive功能时，增加以下两个周期。

Vue2.5.0版本新增了一个周期钩子：ErrorCaptured，当捕获一个来自子孙组件的错误时调用。

16、请描述封装Vue组件的作用过程。

组件能够提升整个项目的开辟效率，可以把页面抽象成多个相对独立的模块，解决了传统项目开辟中效率低、难维护、复用性等咨询题。

使用Vue.extend办法创建一个组件，使用Vue.component办法注册组件。子组件需要数据，能够在props中接收数据。而子组件修改妤数据后，若想把数据传递给父组件，能够采用emit办法。

17、你是怎么样认识vuex的？

vuex能够理解为一种开辟模式或框架。它是对Vue.js框架数据层面的扩展。经过状态（数据源）集中治理驱动组件的变化。应用的状态集中放在store中。改变状态的方式是提交mutations，这是个同步的事务。异步逻辑应该封装在action中。

18、Vue-loader是什么？它的用途有哪些？

它是解析.vue文件的一个加载器，能够将template/js/style转换成JavaScript模块。

用途是经过vue-loader,JavaScript能够写EMAScript6语法，style样式能够应用scss或less,template能够添加jade语法等。

19、请讲出vue.cli项目的src目录中每个文件夹和文件的用法。

assets文件夹存放静态资源；components存放组件；router定义路由相关的配置；view是视图；app.vue是一个应用主组件；main.js是入口文件。

20、在Vue.cli中怎么样使用自定义组件？在使用过程中你遇到过哪些咨询题？

具体步骤如下。

（1）在components目录中新建组件文件，脚本一定要导出暴露的接口。

（2）导入需要用到的页面（组件）。

（3）将导入的组件注入uejs的子组件的components属性中。

（4）在template的视图中使用自定义组件。

21、谈谈你对vue.js的template编译的理解。

简而言之，算是首先转化成AST（AbstractSyntaxTree，抽象语法树），即将源代码语法结构抽象成树状表现形式，然后经过render函数进行渲染，并返回VNode（Vue.js的虚拟DOM节点）。

详细步骤如下。

（1）经过compile编译器把template编译成AST,compile是createCompiler的返回值，createCompiler用来创建编译器。另外，compile还负责合并option。

（2）AST会通过generate（将AST转化成renderfuntion字符串的过程）得到render函数，render的返回值是VNode,VNode是Vue.Js的虚拟DOM节点，里面有标签名子节点、文本等。

22、讲一下Vue.js中的MVVM模式。

MVVM模式即Model-View-ViewModel模式。

Vue.js是经过数据驱动的，Vue.js实例化对象将DOM和数据进行绑定，一旦绑定，和数据将保持同步，每当数据发生变化，DOM也会随着变化。

ViewModel是Vue.js的核心，它是Vue.js的一个实例。Vue.js会针对某个HTML元素进行实例化，那个HTML元素能够是body，也能够是某个CSS选择器所指代的元素。

DOMListeners和DataBindings是实现双向绑定的关键。DOMListeners监听页面所有View层中的DOM元素，当发生变化时，Model层的数据随之变化。DataBindings会监听Model层的数据，当数据发生变化时，View层的DOM元素也随之变化。

23、v-show指令和v-if指令的区别是什么？

v-show与v-if基本上条件渲染指令。不同的是，不管v-show的值为true或false，元素都会存在于HTML页面中；而惟独当v-if的值为true时，元素才会存在于HTML页面中。v-show指令是经过修改元素的style属性值实现的。

24、怎么让CSS只在当前组件中起作用？

在每一个Vue.js组件中都能够定义各自的CSS、JavaScript代码。假如希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性，即。

25、怎么创建vue.js组件？

在vue.js中，组件要先注册，然后才能使用。具体代码如下

26、怎么实现路由嵌套？怎么进行页面跳转？

路由嵌套会将其他组件渲染到该组件内，而不是使整个页面跳转到router-view定义组件渲染的位置。要进行页面跳转，就要将页面渲染到根组件内，可做如下配置。

首先，实例化根组件，在根组件中定义组件渲染容器。然后，挂载路由，当切换路由时，将会切换整个页面。

27、ref属性有什么作用？

有时候，为了在组件内部能够直截了当访咨询组件内部的一些元素，能够定义该属性如今能够在组件内部经过this.$refs属性，更快捷地访咨询设置ref属性的元素。这是一个原生的DOM元素，要使用原生DOMAPI操作它们，例如以下代码。

注意：在Ve2.0中，ref属性替代了1.0版本中v-el指令的功能。

28、Vue.js是什么？

Vue.js的目标是经过尽可能简单的API实现响应式的数据绑定的组件开辟。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

数据模型（Model）发生改变，视图（View）监听到变化，也同步改变；视图（View）发生改变，数据模型（Model）监听到改变，也同步改变。

使用MVVM模式有几大好处。

（2）组件化开辟

（3）指令系统

（4）Vue2.0开始支持虚拟DOM。

但在Vue1.0中，操作的是真实DOM元素而不是虚拟DOM，虚拟DOM能够提升页面的渲染性能。

30、描述vue.js的特点。

Vue.js有以下特点。

31、在vue.js中怎么绑定事件？

经过在v-on后跟事件名称=“事件回调函数()”的语法绑定事件。事件回调函数的参数集合()可有可无。假如存在参数集合()，事件回调函数的参数需要主动传递，使用事件对象要传递$event。固然，如今也能够传递一些其他自定义数据。假如没有参数集合，如今事件回调函数有一个默认参数，算是事件对象。事件回调函数要定义在组件的methods属性中，作用域是Vue.js实例化对象，于是在办法中，能够经过this使用Vue.js中的数据以及办法，也能够经过@语法糖快速绑定事件，如@事件名称=“事件回调函数()”。

32、请讲明组件的作用。

当包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive是一个抽象组件，它自身可不能渲染一个DOM元素，也可不能浮现在父组件链中。

当在内切换组件时，它的activated和deactivated这两个生命周期钧子函数将会执行。

33、axios是什么？怎么使用它？

axios是在vue2.0中用来替换vue-resource.js插件的一个模块，是一个请求后台的模。

用npminstallaxios安装axios。基于EMAScript6的EMAScriptModule规范，经过import关键字将axios导入，并添加到Vue.js类的原型中。如此每个组件（包括vue.js实例化对象）都将继承该办法对象。它定义了get、post等办法，能够发送get或者post请求。在then办法中注册成功后的回调函数，经过箭头函数的作用域特征，能够直截了当访咨询组件实例化对象，存储返回的数据。

34、在axios中，当调用axios.post('api/user'）时进行的是什么操作？

当调用post办法表示在发送post异步请求。

35、sass是什么？怎么在ue中安装和使用？

sass是一种CSS预编译语言安装和使用步骤如下。

（1）用npm安装加载程序（sass-loader、css-loader等加载程序)。

（2）在webpack.config.js中配置sass加载程序。

（3）在组件的style标签中加上lang属性，例如lang="scss"。

36、怎么在Vue.js中循环插入图片？

对“src”属性插值将导致404请求错误。应使用v-bind:src格式代替。

代码如下：

来源：今日热点