Vue面试题供参考.docx

1、Vue面试题供参考1、active-class是哪个组件的属性？嵌套路由怎么定义？答：vue-router模块的router-link组件。2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id3、vue-router有哪几种导航钩子？ 答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件4、scss是什么？安装使用的步骤是？有哪几大特性？答：预处

2、理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？答：css的预编译。使用步骤：第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展

3、.scss第三步：还是在同一个文件，配置一个module属性第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”有哪几大特性:1、可以用变量，例如（$变量名称=值）；2、可以用混合器，例如（）3、可以嵌套5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import Toast from mint-ui。组件一：Toast(登录成功)；组件二：mint-header；组件三：mint-swiper6、v-model是什么？怎么

4、使用？ vue中标签怎么绑定事件？答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：7、axios是什么？怎么使用？描述使用它实现登录功能的流程？答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中8、axios+tp5进阶中，调用axios.post(api/user)

5、是进行的什么操作？axios.put(api/user/8)呢？答：跨域，添加用户操作，更新操作。9、什么是RESTful API？怎么使用?答：是一个api的标准，无状态请求。请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。标准有：.post .put .delete10、vuex是什么？怎么使用？哪种功能场景使用它？答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

6、答：一个model+view+viewModel框架，数据模型model，viewModel连接两个区别：vue数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷12、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）钩子函数参数：el、binding13、说出至少4种vue

7、当中的指令和它的用法？答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定14、vue-router是什么？它有哪些组件？答：vue用来写路由一个插件。router-link、router-view15、导航钩子有哪些？它们有哪些参数？答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）

8、最常用就这几种16、Vue的双向数据绑定原理是什么？答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦

9、数据有变动，收到通知，更新视图第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:1、在自身实例化时往属性订阅器(dep)里面添加自己2、自身必须有一个update()方法3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达

10、到数据变化 - 视图更新；视图交互变化(input) - 数据model变更的双向绑定效果。ps：16题答案同样适合”vue data是怎么实现的？”此面试题。17、请详细说下你对vue生命周期的理解？答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.mess

11、age还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：当data变化时，会触发beforeUpdate和updated方法。销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在18、请说下封装vue组件的过程？答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。然后，使用Vue.extend方法创建一个组件，然后使用Vponent方法注册组件。子组件需要数据，可以在

12、props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。19、你是怎么认识vuex的？答：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。20、vue-loader是什么？使用它的用途有哪些？答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。用途：js可以写e

13、s6、style样式可以scss或less、template可以加jade等21、请说出vue.cli项目中src目录每个文件夹和文件的用法？答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件22、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？答：第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default 第二步：在需要用的页面（组件）中导入：import smithButton from

14、./components/smithButton.vue第三步：注入到vue的子组件的components属性上面,components:smithButton第四步：在template视图view中使用， 问题有：smithButton命名，使用的时候则smith-button。23、聊聊你对Vue.js的template编译的理解？答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）详情步骤：首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），

15、compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）挑战一下：1、vue响应式原理？2、vue-router实现原理？3、为什么要选vue？与其它框架对比的优势和劣势？4、vue如何实现父子组件通信，以及非父子组件通信？5、vuejs与angularjs以及react的区别？6、vu

16、ex是用来做什么的？7、vue源码结构1.vue中的MVVM模式即Model-View-ViewModel。Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindi

17、ngs监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。2.v-show指令，v-if的区别条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值3.如何让css只在当前组件中起作用在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在style中写入scoped，即：4.指令keep-alive在vue-router写着keep-alive，keep-aliv

18、e的含义：如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令5.Vuejs组件vuejs构建组件使用Vponent(componentName, /*component*/ )； 这里注意一点，组件要先注册再使用Vponent(mine, template:#mineTpl, props:name,title,city,content ); var v=new Vue( el:#vueInstance, data: name:zhang, title:this is title, city:Beijing, content:these a

19、re some desc about Blog );6.路由嵌套路由嵌套会将其他组件渲染到该组件内，而不是进行整个页面跳转router-view本身就是将组件渲染到该位置，想要进行页面跳转，就要将页面渲染到根组件，在起始配置路由时候写到：var App = Vue.extend( root );router.start(App,#app);这里首先将根组件注册进来，用于将路由中配置好的各个页面渲染出来，然后将根组件挂载到与#app匹配的元素上。7.指令v-el的使用有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el

20、访问这个元素。注意HTML不区分大小写，所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。示例helloworldthis.$els.msg.textContent / - hellothis.$els.otherMsg.textContent / - worldthis.$els.msg /-hello8.vuejs中使用事件名在vuejs中，我们经常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。绑定事件在HTML中用v-on:click-event,这时evet的名字不要出现大写，因为在1.x中不区分大小写，所以如果

21、我们在HTML写v-on:click=myEvent而在js中写myEvent就出错误，所以在vuejs的1.x绑定事件时候，要尽量避免使用大写字母。在2.0中没有该限制！9.Vue.js是什么Vue.js（是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件10.VueJS 特性：I: MVVM模式（

22、数据变量（model）发生改变 视图（view）也改变， 视图（view）改变，数据变量（model）也发生改变）使用MVVM模式有几大好处：1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。2. 可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。4. 可测试性。可以针对ViewModel来对界面(Vi

23、ew)进行测试II: 组件化III 指令系统IIII: vue2.0开始支持虚拟domvue1.0是操作的是真的dom元素而不是虚拟的虚拟dom:可以提升页面的刷新速度虚拟DOM有利也有弊。A：大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是，Vue.js 2.0 依旧比 较小（当前版本 21.4kb），并且也正在删除很多东西。B: 内存 -同样，虚拟DOM需要将现有的DOM拷贝后保存在内存中，这是一个在DOM更新速度和内存使用中的权衡。C: 并不适用所有情况 -如果虚拟DOM可以一次性进行批量的修改是非常好的。但是如果是单独的、稀少的更新呢？这样的任何DOM更新都将会使虚

24、拟DOM带来无意义的预计算11.Vue.js特点简洁：页面由HTML模板+Json数据+Vue实例组成数据驱动：自动计算属性和追踪依赖的模板表达式组件化：用可复用、解耦的组件来构造页面轻量：代码量小，不依赖其他库快速：精确有效批量DOM更新模板友好：可通过npm，bower等多种方式安装，很容易融入12.Vue.js 和 AngularJS 之间的区别是什么?下面是一些选择 Vue 而不是 Angular 的可能原因；Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织你的应用程序，而不是任何时候都必须遵循 Angular 制定的规则。它仅仅是一个视图层，所以你可以将它嵌入一个

25、现有页面而不一定要做成一个庞大的单页应用。在结合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。例如，Vue.js 核心默认不包含路由和 ajax 功能，并且通常假定你在用应用中使用了一个外部的模块构建系统。这可能是最重要的区别在 API 和内部设计方面，Vue.js 比 Angular 简单得多, 因此你可以快速地掌握它的全部特性并投入开发。Vue.js 拥有更好的性能，因为它不使用脏检查。当 watcher 越来越多时, Angular 会变得越来越慢，因为作用域内的每一次数据变更，所有的 watcher 都需要被重新求值。Vue 则根本没有这个问题，因为它采用的是基于依

26、赖追踪的观察系统，所以所有的数据变更触发都是独立的，除非它们之间有明确的依赖关系。Vue.js 中指令和组件的概念区分得更为清晰。指令只负责封装 DOM 操作，而组件代表一个自给自足的独立单元 它拥有自己的视图和数据逻辑。在 Angular 中它们两者间有不少概念上的混淆。13.Vue.js 和 React.js 有什么区别?React.js 和 Vue.js 确实有一些相似它们都提供数据驱动、可组合搭建的视图组件。然而，它们的内部实现是完全不同的。React 是基于 Virtual DOM一种在内存中描述 DOM 树状态的数据结构。React 中的数据通常被看作是不可变的，而 DOM 操作则

27、是通过 Virtual DOM 的 diff 来计算的。与之相比，Vue.js 中的数据默认是可变的，而数据的变更会直接出发对应的 DOM 更新。相比于 Virtual DOM，Vue.js 使用实际的 DOM 作为模板，并且保持对真实节点的引用来进行数据绑定。Virtual DOM 提供了一个函数式的描述视图的方法，这很 cool。因为它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图通与数据的同步。它也开辟了 JavaScript 同构应用的可能性。实话实说，我自己对 React 的设计理念也是十分欣赏的。但 React 有一个问题就是组件的逻辑和视图结合得非常紧密

28、。对于部分开发者来说，他们可能觉得这是个优点，但对那些像我一样兼顾设计和开发的人来说，还是更偏好模板，因为模板能让我们更好地在视觉上思考设计和 CSS。JSX 和 JavaScript 逻辑的混合干扰了我将代码映射到设计的思维过程。相反，Vue.js 通过在模板中加入一个轻量级的 DSL (指令系统)，换来一个依旧直观的模板，且能够将逻辑封装进指令和过滤器中。React 的另一个问题是：由于 DOM 更新完全交由 Virtual DOM 管理，当你真的想要自己控制 DOM 是就有点棘手了（虽然理论上你可以，但这样做时你本质上在对抗 React 的设计思想）。对于需要复杂时间控制的动画来说这就变成了一项很讨人厌的限制。在这方面，Vue.js 允许更多的灵活性，并且有不少用 Vue.js 构建的富交互实例、