47个基本VueJS面试问题(带答案)

MVVM框架是一个模型-视图-视图模型框架，其中视图模型连接模型和视图。

在有很多数据操作的场景下，MVVM框架更适合，有助于通过操纵数据来渲染页面。

2.哪个组件是活动级的？

它是vue路由器模块的路由器链接组件的一个属性。

3.如何定义Vue- router的动态路由？

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

4.如何获取传递的动态参数？

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

5.vue- router有哪些导航挂钩？

有三种。

第一个是全局导航钩子:router.beforeEach(to，from，next)。作用是跳前判断拦截。

第二个是组件中的钩子。

三是单独路由独占组件。

6.什么是mint-ui？怎么用？

它是基于Vue.js用npm安装的前端组件库，然后通过import导入样式和JavaScript代码。Vue.use(mintUi)用于全局引入，import {Toast}从' mint-ui '用于单个组件中的本地引入。

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

V- model是Vue中的一个指令。js，可以实现双向数据绑定。

8.Vue.js中标签如何绑定事件？

有两种绑定事件的方法。

首先，通过v-on指令。

第二，通过@ syntax sugar，输入@ click= doLog()/>。

9.vuex是什么？怎么用？在哪个功能场景中使用？

Vuex是Vue的状态管理系统。js框架。

为了使用vuex，需要在Vue.js组件中引入并注入store，通过组件内部的$ ostore可以访问store对象。

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

10，如何实现自定义指令？它有什么钩子功能？还有哪些钩子函数参数？

自定义命令包括以下两种类型。

它有以下钩子函数。

钩子函数的参数如下。

11.说出vue.js中至少四个指令及其用法。

相关说明及其用法如下。

什么是12和Vue-路由器？它有哪些组成部分？

它是vue.js的一个路由插件，组件包括router-link和router-vIew。

13.导航挂钩有哪些？它们的参数是什么？

导航挂钩又称导航卫士，分为全局挂钩、单路由独占挂钩和组件级挂钩。

全局钩子包括beforeEach、before resolve(在Vue 2.5.0中添加)和afterEach。

单一路由的独占挂钩在进入之前已经存在。

组件级钩子包括beforeRouteEnter和BeforerouteUpdate(在Vue 2.2中增加)。

它们具有以下参数。

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

具体步骤如下。

(1)递归遍历要观察的数据对象，包括子属性对象的属性，设置set和get特征方法。当你给这个对象赋值时，它会触发绑定的set characteristic方法，这样你就可以监听数据的变化。

(4)MVVM是数据绑定的入口，集成了观察器、编译器和观察器。Observer监控自己的模型数据变化，通过Compile编译模板指令。最后，使用Watcher在观察者和编译器之间搭建沟通桥梁，从而达到数据变更通知视图更新的效果。使用视图交互来改变更新数据模型更改的双向绑定效果。

15，请详细说明你对Vue.js生命周期的理解

整个* * *分为八个阶段，即创建前、已创建、装载前、已装载、更新前、已更新、销毁前和销毁前。

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

Vue的Vue2.5.0版本增加了一个循环钩子:ErrorCaptured，当一个来自后代组件的错误被捕获时调用。

16，请描述一下封装Vue组件的功能流程。

组件可以提高整个项目的开发效率，将页面抽象成几个相对独立的模块，解决传统项目开发中效率低、维护难、可复用的问题。

使用Vue.extend方法创建组件，使用Vue.component方法注册组件。子组件需要数据，并且可以接收props中的数据。但是，在子组件修改数据后，如果它想将数据传递给父组件，它可以采用emit方法。

17，你是怎么认识vuex的？

Vuex可以理解为一种开发模型或框架。它是Vue的数据级的扩展。js框架。通过状态(数据源)集中管理驱动程序组件的更改。应用程序的状态集中在存储中。改变状态的方法是提交突变，这是一个同步事务。异步逻辑应该封装在动作中。

什么是18和Vue- loader？它的用途是什么？

它是一个用于解析的加载器。vue文件，并且可以将template/js/style转换成JavaScript模块。

目的是通过vue-loader，JavaScript可以写EMAScript 6语法，style style可以应用scss或更少，template可以添加jade语法。

19，请说出vue.cli项目src目录下每个文件夹和文件的用法。

Assets文件夹保存静态资源；组件存储组件；路由器定义与路由相关的配置；视图是视图；App。vue是应用程序的主要组件；Main.js是入口文件。

20.如何在Vue.cli中使用自定义组件？你在使用过程中遇到过哪些问题？

具体步骤如下。

(1)在组件目录中创建新的组件文件，脚本必须导出公开的接口。

(2)导入所需的页面(组件)。

(3)将导入的组件注入uejs的子组件的components属性中。

(4)在模板视图中使用自定义组件。

21，谈谈你对vue.js的模板编译的理解

简而言之，先转化为AST(抽象语法树)，即把源代码的语法结构抽象成树状表达式，然后通过render函数进行渲染，返回给VNODE(vue . js的虚拟DOM节点)。

具体步骤如下。

(1)通过compile编译器将模板编译成AST，其中compile是create编译器的返回值，用来创建编译器。此外，编译器还负责合并选项。

(2)AST会通过generate(将AST转换成render Fun字符串的过程)得到render函数，render的返回值是VNODE，是Vue的虚拟DOM节点。Js，其中包含标签名称、子节点、文本等等。

22.谈谈Vue.js中的MVVM模式

MVVM模式是模型-视图-视图模型模式。

Vue。js是数据驱动的。Vue.js实例化对象绑定DOM和数据。一旦绑定，它们将与数据保持同步，每当数据发生变化时，DOM也会发生变化。

ViewModel是Vue.js的核心，是vue.js的一个实例，Vue.js会实例化一个HTML元素，可以是一个体，也可以是一个CSS选择器指向的元素。

DOM侦听器和数据绑定是实现双向绑定的关键。DOM监听器监听页面的所有视图层中的DOM元素，当发生变化时，模型层中的数据也会相应地变化。数据绑定会监听模型层的数据，当数据发生变化时，视图层的DOM元素也会发生变化。

23.v-show指令和v-if指令有什么区别？

V-show和v-if都是条件渲染指令。不同的是，不管v-show的值是真还是假，元素都会存在于HTML页面中；只有当v-if的值为true时，元素才会存在于HTML页面中。v-show指令是通过修改元素的样式属性值来实现的。

24.如何让CSS只在当前组件中工作？

每个Vue.js组件都可以定义自己的CSS和JavaScript代码。如果希望在组件中编写的CSS只在当前组件上工作，只需将Scoped属性添加到Style标记中，也就是说。

25.如何创建vue.js组件？

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

26.如何实现路由嵌套？如何进行页面跳转？

路由嵌套将其他组件呈现到该组件中，而不是让整个页面跳转到router-view定义组件呈现的位置。要进行页面跳转，您必须将页面呈现到根组件中，这可以按如下方式配置。

首先，实例化根组件，并在根组件中定义组件呈现容器。然后，登上路线。切换路线时，会切换整个页面。

27.ref属性的作用是什么？

有时候，为了直接访问组件内部的一些元素，可以定义这个属性。此时，您可以通过它更快地访问设置了ref属性的元素。组件内的$refs属性。这是一个原生DOM元素，您应该使用原生DOM API来操作它们，如下面的代码。

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

28.什么是Vue。js？

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

29.描述一下vue.js的一些特点。

Vue.js有以下特点。

(1)MVVM模式。

当数据模型发生变化时，视图监控变化并同步变化；当视图改变时，数据模型监听改变并同步改变。

使用MVVM模式有几个优点。

(2)组件开发

(3)教学系统

(4)Vue2.0开始支持虚拟DOM。

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

30.描述vue.js的特点

Vue。js有以下特点。

31.如何绑定vue.js中的事件？

事件通过语法与v-on后的event name = " event callback function()"绑定。事件回调函数的参数集()是可选的。如果有参数集()，事件回调函数的参数需要主动传递，事件对象需要传递$event。当然，此时也可以传递一些其他自定义数据。如果没有设置参数，事件回调函数有一个默认参数，即事件对象。事件回调函数应该在组件的methods属性中定义，作用域是Vue。js实例化对象。因此，在方法中，可以使用Vue中的数据和方法。js通过这个，也可以通过@ syntax sugar快速绑定事件，比如@ event name = " event callback function()"。

32.请解释组件的功能。

当动态组件被包装时，不活动的组件实例被缓存而不是被销毁。

保持活力& gt是一个抽象组件，它本身不呈现DOM元素，也不出现在父组件链中。

当一个组件被接入时，它的两个生命周期功能，激活和去激活，将被执行。

33.axios是什么？怎么用？

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

使用npm安装axios安装axios。基于EMAScript 6的EMAScript模块规范，通过import关键字导入axios，并添加到类vue.js的原型中，这样每个组件(包括vue.js实例化对象)都会继承方法对象。它定义了get和post等方法，并且可以发送get或post请求。在then方法中成功注册的回调函数可以直接访问组件实例化对象，并通过arrow函数的作用域特征存储返回的数据。

34.在axios中，调用axios.post('api/user ')时的操作是什么？

调用post方法时，意味着发送post异步请求。

35.什么是萨斯？如何在ue中安装使用？

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

(1)使用npm安装加载程序(如sass-loader和css-loader)。

(2)在webpack.config.js中配置sass加载器

(3)将lang属性添加到组件的style标签中，例如lang="scss "。

36.如何在Vue中循环插入图片？js？

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

代码如下: