Vue面试题汇总

1.对于MVVM的理解

MVVM是Moudel-View-viewModel 的缩写。

Model

代表数据类型，也可以在Model中定义数据修改和操作的业务逻辑。

View

代表UI组件，她负责将数据模型转化成UI展现出来。

ViewModel

监听模型数据的改变和控制视图的行为，处理用户交互，简单逻辑就是一个同步View和Model的对象，连接Model和View。

在MVVM架构下，View和Model之间并额米有hi直接联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立刻反应到View上。

VIewModle

通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要收到操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全有MVVM来统一管理。

2.Vue的生命周期

beforeCreate

(创建前) 在数据观测和初始化时间还未开始。

created

(创建后) 完成数据观测，属性和方法的运算，初始化时间，$el属性还没有显示出来。

beforeMount

(载入前) 在挂壁开始之前被调用，相关的render函数首次被调用，实例已完成一下的配置：把data里面的数据和模板生成html。注意此时还没有挂在html到页面上。

mounted

(载入后) 在el被新创建的Vm.$el替换，并挂在到实例上去之后调用。实例已完成以下的配置：用上面的编译好的html内容替换el属性执行DOM对象。完成模板中的html渲染都html页面中。此过程中进行ajax交互。

beforeUpdata

(更新前) 在数据更行之前调用，发生在虚拟DOM重新渲染和打补丁之前可以在改钩子中进一步的更改状态，不会触发附加的冲渲染过程。

updata

(更新后) 再由于数据更改导致的虚拟DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器渲染期间不被调用。

beforeDestroy

(销毁前) 在实例销毁之前调用。实例任然完全可用。

destroyed

(销毁后) 在市里销毁之后调用。调用后，又有的时间监听器会被移除，又有的子实例也会被销毁。该钩子在服务器渲染期间不被调用

1.什么是vue生命周期？

答：Vue实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂在Dom-渲染、更新-渲染、销毁等一些系列过程，称之为Vue的生命周期。

2.Vue生命周期的作用是什么？

答：它的生命周期中有多个时间钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.Vue生命周期总共有几个阶段？

答：他可以总共分为8个阶段：创建前/后,载入前/后,更新前/后,销毁前/后。

4.第一次页面加载会触发那几个钩子？

答：会触发下面几个钩子： beforCrete，created，brforeMount，mounted。

5.DOM渲染在哪个周期中就已完成？

答：DOM渲染在mounted中就已经完成了。

3.Vue实现数据双向绑定的原理

vue实现数据双向绑定主要是：

采用数据劫持结合发布者-订阅模式

的方式，通过

Object。defineProperty

() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通Javascript对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用Object。defineProperty 将它们转为 getter/setter。用户看不到 getter/setter ，但是在内部他们让vue追踪依赖，在属性被访问和修改的通知变化。

vue的数据双向绑定将MVVM为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令(vue中是用来解析 {

{}} ) ，最终利用watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 –> 试图更新；视图交互变化 (input) –> 数据model变更双向绑定效果。

4.Vue组件间的参数传递

1.父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据。

子组件传给父组件：$emit方法传递参数。

2.非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件。

当项目比较小时，用这个比较合适。( 虽然也有不少人推荐直接调用Vuex，具体来说看需求，技术只是手段。)

5.Vue的路由实现：hash模式和history模式

hash模式

：在浏览器中符号”#”，#以及# 后面的字符称之为hash，用window。location.hash读取。

特点： hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务器安全无用，hash不会重新加载页面。

hash 模式下，仅 hash 符号之间的内容会被包含在请求中，如 http://www.xxx.com ，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404 错误。

history模式

：history采用HTML5 新特性；且提供了两个新方法：pushState（），

replaceState（）可以对浏览器历史记录栈进行修改，以及popState时间的监听到状态变更。

history模式下，前段的URL必须和实际向后端发起请求的URL一致，如http://www.xxx.com/items/id 。后端如果减少对 /items/id 的路由处理，将返回404错误。

6.Vue与Angular以及React区别？

1.与Angular.js的区别

相同点：

都支持指令：内置指令的自定义指令；都支持过滤器；内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。

不同点：

Angular.js的学习成本高，比如增加了Dependenry Injection 特性，而Vue.js本身提供的API都比较简单、直观；在性能上，Angular.js依赖对数据做脏检查，所以Watche越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

2.与React区别

相同点：

React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写Vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同，组件实例之间可以嵌套，都提供合理的钩子函数，可以让开发者定制化地去处理要求，都不内置列数AJAX，React等功能到核心包，而是以插件的方式加载；在组建开发中都支持mixins的特性。

不同点：

React采用Virtual DOM 会对渲染出来的结果做脏检查；Vue.js在末班中提供了指令，过滤器等，可以非常方便，快捷的操作Virtual Dom

6.vuex是什么？怎么使用？那种功能场景使用它？

只用来读取的状态集中放在store中；改变状态的方式是提交metations，这是个同步的事物；异步逻辑应该封装在action中。

在main.js引入store，注入。新建了一个目录store，…export.

场景有：单页面应用中，组件之间的状态、音乐播放、登录状态、加入购物车。

state

vuex使用单一状态树，即每个应用将仅仅包含一个store实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

mutations

mutations定义的方法动态修改Vuex的store中的状态或数据。

getters

类似vue的计算属性，主要用来过滤一些数据。

action

actions可以理解通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view层通过store.dispath 来分发action。

modules

项目特别复杂的时候，可以让每一个模块拥有自己的state、mutatuin、action、getters使得结构非常清晰，方便管理。

7.css只在当前组件起作用

答：在style标签中写入scoped即可。

8.v-if 和 v-show 区别

答：v-if 按照条件是否渲染，v-show使display的block或none。

9.

答：

是

”

路

由

信

息

对

象

”

，

包

括

，

等

路

由

信

息

参

数

，

而

route是”路由信息对象”，包括path，hash，params，query，fullPath，matched，name等路由信息参数，而

$r o u t e 是 ” 路由信息对象 ” ，包括 p a t h ， h a s h ， p a r a m s ， q u e r y ， f u l l P a t h ， m a t c h e d ， n a m e 等路由信息参数，而$

router是”路由实例”对象包括了路由的跳转方法，钩子函数等。

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

答：数据驱动，组件系统。

11.vue几种常用的指令

答：v-for、v-if、v-bind、v-on、v-show、v-else

12.vue常用的修饰符？

答：prevent 提交时间不在重载页面；.stop 阻止单机时间冒泡；.self 当事件发生在钙元素本身而不是子元素的时候会触发；.capture 事件监听，事件发生的时候会调用

13.v-on可以绑定多个方法

答：可以

14.vue 中 key值得作用

答：当Vue.js用v-for 正在更新已渲染过的元素列表时，它默认用”就地复出”策略。如果数据项的顺序被改变，VUe将不会移动DOM元素来匹配数据项的顺序，而是简单付出此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素，key的作用主要是为了搞笑==高效的更新虚拟DOM。

15.vue等单页面应用的优缺点

答：优点：Vue 的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简介、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化( 如果要支持SEO，建议通过服务端来进行渲染组件 )；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进，后退。

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

答：在router 目录下的index.js文件中，对path属性加上/id，使用router对象的params.id获取。

17如何获取dom？

答：ref = “domName” 用法：this.$refs.domName 。

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

答：vue文件的一个加载器，将template/js/style 转换成js模块。

用途: jjs可以写ES6、style样式可以scss或less、tmplate可以加jade等。

19.v-model使用

答：v-model 用于表单数据的双向绑定，其实它就是一个语法槽，这个背后就做了两个操作；

v-bind 绑定一个value 属性；

v-on 指令给当前元素绑定input事件。

20.v-show和v-if指令的共同点和不同点？

答：共同点：都能控制元素的显示和隐藏。

不同点：实现本质方法不同，v-show本质就是通过css中的display设置none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和穿件比较消耗性能。

总结：如果要频繁切换某节点，使用v-show( 切换开销比较小，初始开销较大 )。如果不需要频繁切换某节点使用v-if( 初始渲染开销较小，切换开销比较大 )。

21.
`<keep-alive></keep-alive>`
作用是什么？

答：keep-alive是Vue 内置的一个组件，可以是被包含的组件保留状态，或避免重新渲染。

22.说出vue.cli 项目中src目录每个文件夹和文件的用法？

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

23.简述computed和watch的使用场景

答：computed 当一个属性受多个属性影响的时候就需要用到computed；

最典型的例子：购物车商品结算的时候。

watch 当一条数据影响多条数据的时候就需要用watch

例子：搜索数据。

24.$nextTick的使用

答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要私用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

25.vue组件中data为什么必须是一个函数？

答：因为JavaScript 的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。

组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己西游的数据空间，他们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用一个data，这样改一个全部改了。

26.渐进式框架的理解

答：主张最少，可以根据不同的需求选择不同的层级。

27. vue的两个核心点

答：数据驱动，组件系统

数据驱动：viewModel 保证数据的视图的一致性

组件系统：应用累UI可看作全部是由组件树构成。

28.delate与Vue.delete 删除数组的区别

答：delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值话是不变。

Vue.delete直接删除了数组，改变了数组的键值。

29.SPA首屏加载慢如何解决

答：安装动态懒加载所需插件；使用CDN资源

30.vue slot

答：简单来说，父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在那个地方显示、如何显示、就是slot分发负责的话。

31.vue2中注册在router-link上时间无效解决方法

答：使用@click-native。原因：router-link 会阻止click事件，native 指直接监听一个原生事件。

32.axios的特点有哪些

答：从浏览器中创建XHLHttpRequests；

node.js 创建http请求；

支持Promise API

拦截请求和响应

转换请求数据和响应数据；

自动换成json

取消请求

axios 中的发送字段的参数是data 跟params 两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求进行发送。

params 一般适用于get请求，data一般适用于post put请求

原文链接：https://blog.csdn.net/Lsp19980917/article/details/109705028