看面试问题，只是为了检查和填补空白，看看哪些方面你不懂。记住不要以为背完面试题就万事大吉了。最好能理解背后的原理，这样面试的时候就可以聊一聊。否则稍有水平的面试官一眼就能看出是否有真才实学或者只是背下这个面试问题。(都是基本的vue面试问题，大神不用浪费时间往下看)

1.对MVVM的了解？

MVVM是模型-视图-视图模型的缩写。模型代表数据模型，数据修改和操作的业务逻辑也可以在模型中定义。视图代表UI组件，负责将数据模型转换成UI进行展示。视图模型监控模型数据的变化，控制视图行为和处理用户交互。简单理解，就是一个同步视图和模型，连接模型和视图的对象。在MVVM架构下，视图和模型之间没有直接的联系，而是通过视图模型进行交互。Model和ViewModel之间的交互是双向的，所以View数据的变化会同步到Model，Model数据的变化会立即反映到View。ViewModel通过双向数据绑定连接视图层和模型层，视图和模型之间的同步完全是自动的，无需人为干预。所以开发者只需要关注业务逻辑，不需要手动操作DOM，也不需要关注数据状态的同步。复杂的数据状态维护完全由MVVM管理。

二、Vue的生命周期

Beforecreated在数据观察和初始化事件没有开始之后，数据观察、属性和方法的操作、初始化事件已经完成，并且$el属性没有显示。在装载开始之前调用beforeMount，并首次调用相关的呈现函数。该实例已经完成了以下配置：编译模板，并从数据中的数据和模板生成html。请注意，html目前尚未安装在页面上。

在el被新创建的vm替换后调用Mounted(加载后)。$el并安装在实例上。实例已完成以下配置：用上面编译的html内容替换el属性指向的DOM对象。完成模板中的html到html页面的渲染。Ajax交互就是在这个过程中进行的。

在更新数据之前调用BeforeUpdate，在重新呈现和修补虚拟DOM之前调用before update。您可以在这个钩子中进一步改变状态，而不会触发额外的重新呈现过程。由于数据更改，在重新呈现和修补虚拟DOM后调用Updated。调用时，组件的DOM已经更新，因此您可以执行依赖于DOM的操作。但是，在大多数情况下，您应该避免在此期间更改状态，因为这可能会导致无限的更新循环。在服务器端呈现期间不调用此钩子。

在实例被销毁之前调用BeforeDestroy。实例仍然完全可用。在实例被销毁后调用销毁。调用后，所有事件侦听器都将被删除，所有子实例都将被销毁。在服务器端呈现期间不调用此钩子。

1.什么是vue生命周期？答：Vue实例从创建到销毁的过程就是生命周期。创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染、销毁等一系列过程称为Vue的生命周期。

2.2.vue生命周期的作用是什么？答：它的生命周期中有很多事件钩子，这使得我们在控制Vue实例的整个过程时更容易形成良好的逻辑。

3.3.vue生命周期有几个阶段？答：可以分为八个阶段：创建前/后、加载前/后、更新前/后、销毁前/后。

4.第一次加载页面时会触发哪些钩子？答：将触发以下创建前、创建后、装载前和装载后操作。

5.其中循环有5个。DOM渲染完成了吗？答：已在挂载中完成DOM渲染。

三、Vue的数据双向绑定原理：Object.defineProperty()

Vue主要通过采用与发布者-订阅者模式相结合的数据劫持来实现数据双向绑定，通过Object.defineProperty()，劫持各种属性的setter和getter，在数据发生变化时向订阅者发布消息，并触发相应的监控回调。当一个普通的Javascript对象作为其数据选项传递给Vue实例时，Vue将遍历其属性，并通过使用Object.defineProperty将其转换为getter/setter，用户看不到getter/setter，但在内部，他们让Vue跟踪依赖关系，并在属性被访问和修改时通知更改。

vue的双向数据绑定以MVVM为数据绑定的入口，集成了observer、compile和watcher，通过Observer监控自身模型的数据变化，通过Compile解析编译模板指令(用于vue中解析{{}})，最终通过Watcher在Observer和Compile之间搭建通信桥梁，实现数据的变化-视图更新。查看交互更改(输入)—数据模型更改的双向绑定效果。

Js实现了简单的双向绑定

body div id='app '输入类型=' text ' id=' txt ' p id=' show '/p/div/body script类型=' text/JavaScript ' var obj={ } object . definepreoperty(obj，' txt '，{ get: function () { return obj }，set : function(new value){ document . getelementbyid(' txt ')。value=new value document . getelementbyid(' show ')。innerHTML=new value } })document . addevent listener(' keyup '，function(e){ obj . txt=e . target . value })/script IV。Vue组件之间的参数传递

1.父组件和子组件传递值。父组件传递给子组件：子组件通过props方法接收数据；子组件被传递给父组件：$emit方法传递参数2。非父组件和子组件之间的数据传输，兄弟组件传递值eventBus，就是创建一个事件中心，相当于一个中转站，可以用来传输和接收事件。项目比较小，用这个比较合适。(虽然很多人建议直接用VUEX，但是要看需求。技术只是手段，实现目标才是王道。)

5.Vue的路由实现：哈希模式和历史模式

Hash模式：在浏览器中，符号“#”、#和#后的字符称为hash，由window.location.hash读取；特点：哈希虽然在URL中，但不包含在HTTP请求中；用于指导浏览器动作，对服务器安全没用，hash也不会重载页面。

历史模式：历史采用HTML5的新特性；并提供了两种新方法：pushState()，replaceState()可以修改浏览器历史堆栈，检测popState事件改变状态。

6.Vue和Angular和React有什么区别？

(版本不断更新，以下差异可能不正确。我只在工作中使用vue，不熟悉棱角和反应。1.AngularJS和Angular JS的区别是一样的：都支持指令：内置指令和自定义指令；两者都支持过滤器：内置过滤器和自定义过滤器；两者都支持双向数据绑定；他们不支持低端浏览器。

区别：AngularJS学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API相对简单直观；性能方面，AngularJS依赖数据的脏检查，所以Watcher越多，速度越慢；Vue.js使用基于依赖跟踪的观察，使用异步队列更新，所有数据独立触发。

2.REACT和React的区别是一样的：React采用特殊的JSX语法，vue.js也提倡写作。Vue在组件开发中采用特殊的文件格式，对文件内容有一些约定，两者都需要编译后使用；中心思想是一样的：一切都是组件，组件实例可以嵌套；两者都提供了合理的钩子函数，可以让开发者自定义自己的需求；AJAX和Route的功能没有内置到核心包中，而是作为插件加载；组件开发支持Mixins。区别：React采用的Virtual DOM会对渲染结果进行脏检；Vue.js提供指令、过滤器等。在模板中，可以非常方便快捷地操作虚拟DOM。

七、vue路由的钩子功能

主页可以控制导航跳转，每个之前，每个之后等。通常用于修改页面标题。有些需要登录才能调整页面的重定向功能。每个之前有三个主要参数：到、从和下一个：

To: route即将进入目标路由对象，from:route当前导航即将离开的路由。下一步：函数必须调用这个方法来解析这个钩子。执行效果取决于下一个方法的调用参数。你可以控制网页的跳转。

八、什么是vuex？怎么用？哪个功能场景使用它？

只读状态集中在存储中；改变状态的方式是提交突变，这是同步的事情；异步逻辑应该封装在动作中。在main.js中引入store并注入。一个新的目录存储….导出已创建。场景包括：组件之间的状态、音乐播放、登录状态以及在单页应用程序中加入购物车

StateVuex使用单一状态树，即每个应用程序将只包含一个存储实例，但单一状态树与模块化并不冲突。不能直接修改存储的数据状态。由突变定义的方法动态修改Vuex存储中的状态或数据。Getters类似于vue的计算属性，主要用于过滤一些数据。动作动作可以理解为通过改变突变中处理数据的方法来异步处理数据的方法，简单来说就是异步操作数据。视图层通过store.dispath分发操作.

const store=new vuex . store({//store实例状态： {count:0}，突变3360 {increment (state) {state。count}}，Actions : { increment(context){ context . submit(' increment ')})当modules项目特别复杂时，每个模块都可以有自己的状态、突变、动作和getters，这使得结构非常清晰，便于管理。

const moduleA={ state: {.}，突变： {.}，操作： {.}，getters: {.} } const moduleB={ state: {.}，Variations : {.}，操作： {.} } const store=new vuex . store({ modules : { a : modulea，b: moduleb}) IX。vue-cli如何添加自定义指令？

1.创建本地指令

Varapp=newvue ({el:' # app '，data: {}，//Create instructions(可以有多个)指令3360 {//指令名dir 1: { insert(El)}//指令中的第一个参数是当前使用的指令的DOM console . log(El)；console.log(参数)；//操作DOM El . style . width=' 200 px '；El . style . height=' 200 px '；El . style . background=“# 000”；}} }})2.全局指令

Vue.directive('dir2 '，{ insert(El){ console . log(El)；}})3.使用说明

div id=' app ' div v-dir 1/div v-dir 2/div/div x . vue如何自定义滤镜？

Html代码：

Div id=' app '输入类型=' text' v-model=' msg'/{{msg |大写}}/div js代码：

var VM=new Vue({ El : ' # app }，data:{ msg:'' }，filter s : { capitalize : function(value){ if(！Value)返回“”值=value。tostring()返回值。charat (0)。touppercase()值。切片(1)}}})全局定义过滤器

Vue.filter('大写'，function (value) { if(！Value)返回“”值=value。tostring()返回值。charat (0)。touppercase()值。slice (1)})过滤器接收表达式的值(msg)作为第一个参数。大写过滤器将接收msg的值作为第一个参数。

XI。对保活的理解？

Keep-alive是Vue的内置组件，可以保持包含的组件处于状态或者避免重新渲染。在VUE 2 . 1 . 0版之后，保活增加了两个新属性： include(包含组件缓存)和exclude(排除的组件不缓存，优先级高于include)。

施用方式

keep-alive include=' include _ components ' exclude=' exclude _ components ' component！-此组件是否被缓存取决于包含和排除属性-///component/keep-alive参数解释包含字符串或正则表达式，只有名称匹配的组件才会被缓存排除字符串或正则表达式，任何名称匹配的组件都不会被缓存。两者都可以使用“，”来分隔字符串、正则表达式和数组。使用正则或数组时，请记住使用v-bind。

用法示例

！-逗号分隔的字符串，仅缓存组件a和b。-保活包括='a，b '组件/组件/保活！-正则表达式(需要v-bind，所有匹配的规则都会被缓存)-keep-alive : include='/a | b/' component/component/keep-alive！- Array(需要使用v-bind，包含的所有内容都会被缓存)-keep-alive : include=' ['a '，' b ']' component/component/keep-alive 12。能用一句话回答的面试问题

1.css只在当前组件中工作。答：在样式标签中写入范围。比如：2。v-if和v-show A的区别：v-if是否按照条件渲染，v-show是块还是无；展示的；3.$route与$router的区别A: $ route是一个“路由信息对象”，它包括路径、参数、哈希、查询、fullPath、matched、name等路由信息参数。而$router是一个“路由实例”对象，其中包含了跳转方法、钩子函数等。4.4.vue.js的两个核心是什么？a:数据驱动，组件系统5。vue a的几种常用指令：v-for、v-if、v-bind、v-on、v-show、v-else 6。vue常用的修饰语？A: prevent:提交事件不再重新加载页面；stop:防止点击事件冒泡；当事件发生在元素本身而不是子元素时，Self:被触发；capture:事件拦截。当事件发生时，将调用7.v-on。可以绑定多个方法吗？回答：是的。8.8.vue中关键价值的作用是什么？答：当Vue.js用v-for更新渲染后的元素列表时，默认为“原地重用”策略。如果改变了数据项的顺序，Vue将不会移动DOM元素来匹配数据项的顺序，而只是在这里重用每个元素，并确保它显示已经在特定索引下呈现的每个元素。key的目的是高效更新虚拟DOM。9.vue的计算属性是什么？答：在模板中放太多逻辑会使模板太重，难以维护。当数据需要以复杂的方式处理并且可能被多次使用时，尝试计算属性。优点：数据处理结构清晰；(2)根据数据，更新数据并自动更新处理结果；计算属性中的这个指向vm实例；(4)调用模板时，直接写出计算出的属性名；获取数据常用getter方法，更改数据也可以使用set方法。与方法相比，无论依赖数据不变，方法都会被重新计算，但当依赖数据不变时，computed会从缓存中获取，不会被重新计算。10.vue等单页应用及其优缺点A:优点：vue的目标是通过尽可能简单的一个API实现响应性数据绑定和组合视图组件，核心是响应性数据绑定系统。MVVM，数据驱动，组件化，轻量级，简洁，高效，快速和模块友好。缺点：不支持较低版本的浏览器，至少只支持IE 9；不利于SEO优化(如果要支持SEO，建议通过服务器渲染组件)；第一次加载主页需要很长时间。您不能使用浏览器的导航按钮。你需要自己前进和后退。

PS:缺格码，过几天再补。有些地方可能描述不清楚。如果有任何歧义，我可能误解了他们。

摘要

以上是边肖介绍的Vue面试问题和Vue知识点汇编，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！