Vue面试题(供参考)资料讲解

Vu e 面试题 ( 供参考 )精品文档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 是什么？安装使用的步骤是？有哪几大特性？答：预处理 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 属性中加一个拓展 .scss第三步：还是在同一个文件，配置一个module 属性第四步：然后在组件的style标签加上 lang 属性 ，例如： lang= ”scss ”有哪几大特性 :1、可以用变量，例如（ $变量名称 =值）；2、可以用混合器，例如（）3、可以嵌套收集于网络，如有侵权请联系管理员删除精品文档5、mint-ui是什么？怎么使用？说出至少三个组件使用方法？答：基于 vue 的前端组件库。 npm安装，然后 import 样式和 js ， vue.use（ mintUi ）全局引入。在单个组件局部引入：import Toast frommint-ui 。组件一： Toast( 登录成功 ) ；组件二： mint-header ；组件三： mint-swiper6、v-model 是什么？怎么使用？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) 是进行的什么操作？axios.put(api/user/8) 呢？答：跨域，添加用户操作，更新操作。9、什么是 RESTful API ？怎么使用 ?答：是一个 api 的标准，无状态请求。请求的路由地址是固定的，如果是 tp5 则先路由配置中把资源路由配置好。标准有： .post .put .delete10、vuex 是什么？怎么使用？哪种功能场景使用它？答： vue 框架中状态管理。在main.js引入 store ，注入。新建了一个目录store ， . export。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车收集于网络，如有侵权请联系管理员删除精品文档11、mvvm框架是什么？它和其它框架（jquery ）的区别是什么？哪些场景适合？答：一个 model+view+viewModel 框架，数据模型 model，viewModel 连接两个区别： vue 数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷12、自定义指令（ v-check 、 v-focus ）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？答：全局定义指令：在vue 对象的 directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives钩子函数： bind （绑定事件触发）、 inserted(节点插入的时候触发 ) 、update（组件内相关更新）钩子函数参数： el 、binding13、说出至少 4 种 vue 当中的指令和它的用法？答： 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 （一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种16、Vue 的双向数据绑定原理是什么？收集于网络，如有侵权请联系管理员删除精品文档答： vue.js是采用数据劫持结合发布者- 订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter ，getter ，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要 observe 的数据对象进行递归遍历 ，包括子属性对象的属性，都加上 setter 和 getter这样的话，给这个对象的某个值赋值，就会触发 setter ，那么就能监听到了数据变化第二步： compile 解析模板指令 ，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图第三步： Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要做的事情是 :1、在自身实例化时往属性订阅器(dep) 里面添加自己2、自身必须有一个update() 方法3、待属性变动 dep.notice()通知时，能调用自身的update() 方法，并触发Compile 中绑定的回调，则功成身退。第四步： MVVM作为数据绑定的入口，整合 Observer 、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 - 视图更新；视图交互变化 (input) - 数据 model 变更的双向绑定效果。ps：16 题答案同样适合” vue data是怎么实现的？” 此面试题 。17、请详细说下你对vue 生命周期的理解？答：总共分为 8 个阶段创建前 / 后，载入前 / 后，更新前 / 后，销毁前 / 后。创建前 / 后： 在 beforeCreated 阶段， vue 实例的挂载元素 $el 和数据对象 data 都为 undefined ，还未初始化。在 created 阶段， vue 实例的数据对象收集于网络，如有侵权请联系管理员删除精品文档data 有了， $el 还没有。载入前 / 后：在 beforeMount 阶段， vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的dom节点， data.message 还未替换。在 mounted 阶段， vue实例挂载完成， data.message 成功渲染。更新前 / 后：当 data 变化时，会触发beforeUpdate 和 updated 方法。销毁前 / 后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom的绑定，但是 dom结构依然存在18、请说下封装vue组件的过程？答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发： 效率低、难维护、复用性等问题。然后，使用 Vue.extend 方法创建一个组件，然后使用 Vponent 方法注册组件。子组件需要数据，可以在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用 emit 方法。19、你是怎么认识vuex 的？答： vuex 可以理解为一种开发模式或框架。比如PHP有 thinkphp ，java 有spring等。通过状态（数据源）集中管理驱动组件的变化（好比spring的 IOC 容器对bean 进行集中管理）。应用级的状态集中放在store 中； 改变状态的方式是提交mutations ，这是个同步的事物；异步逻辑应该封装在action中。20、vue-loader是什么？使用它的用途有哪些？答：解析 .vue 文件的一个加载器，跟template/js/style转换成 js 模块。用途： js 可以写 es6、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 ./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 即 源代码的抽象语法结构的树状表现形式）， 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、vuex 是用来做什么的？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 Bindings 监听 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-alive 的含义：如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 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 are some desc about Blog);6. 路由嵌套路由嵌套会将其他组件渲染到该组件内，而不是进行整个页面跳转router-view 本身就是将组件渲染到该位置，想要进行页面跳转，就要将页面渲染到根组件，在起始配置路由时候写到：var App = Vue.extend( root );router.start(App,#app);这里首先将根组件注册进来，用于将路由中配置好的各个页面渲染出来，然后将根组件挂载到与 #app 匹配的元素上。7. 指令 v-el 的使用有时候我们想就像使用jquery 那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el 访问这个元素。注意收集于网络，如有侵权请联系管理员删除精品文档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 中不区分大小写，所以如果我们在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 模式（数据变量（ model）发生改变 视图（ view ）也改变， 视图（ view ）改变，数据变量（ model）也发生改变）使用 MVVM模式有几大好处：1. 低耦合。 View 可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。收集于网络，如有侵权请联系管理员删除精品文档2. 可重用性。可以把一些视图的逻辑放在 ViewModel 里面，让很多View 重用这段视图逻辑。3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel) 。设计人员可以专注于界面(View) 的设计。4. 可测试性。可以针对 ViewModel 来对界面 (View) 进行测试II: 组件化III 指令系统IIII: vue2.0开始支持虚拟 domvue1.0 是操作的是真的 dom元素而不是虚拟的虚拟 dom:可以提升页面的刷新速度虚拟 DOM有利也有弊。A：大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是， Vue.js 2.0 依旧比 较小（当前版本 21.4kb ），并且也正在删除很多东西。B: 内存 - 同样，虚拟 DOM需要将现有的 DOM拷贝后保存在内存中，这是一个在 DOM更新速度和内存使用中的权衡。C: 并不适用所有情况 - 如果虚拟 DOM可以一次性进行批量的修改是非常好的。但是如果是单独的、稀少的更新呢？这样的任何DOM更新都将会使虚拟DOM带来无意义的预计算11.Vue.js特点简洁：页面由 HTML模板 +Json 数据 +Vue实例组成数据驱动：自动计算属性和追踪依赖的模板表达式组件化：用可复用、解耦的组件来构造页面轻量：代码量小，不依赖其他库快速：精确有效批量DOM更新模板友好：可通过npm， bower 等多种方式安装，很容易融入12.Vue.js和 AngularJS之间的区别是什么 ?下面是一些选择Vue 而不是 Angular的可能原因；收集于网络，如有侵权请联系管理员删除精品文档Vue.js是一个更加灵活开放的解决方案。它允许你以希望的方式组织你的应用程序，而不是任何时候都必须遵循Angular制定的规则。它仅仅是一个视图层，所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在结合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。例如， Vue.js核心默认不包含路由和ajax功能，并且通常假定你在用应用中使用了一个外部的模块构建系统。这可能是最重要的区别在 API和内部设计方面， Vue.js比 Angular简单得多 ,因此你可以快速地掌握它的全部特性并投入开发。Vue.js拥有更好的性能，因为它不使用脏检查。当watcher越来越多时 ,Angular会变得越来越慢，因为作用域内的每一次数据变更，所有的watcher都需要被重新求值。 Vue 则根本没有这个问题，因为它采用的是基于依赖追踪的观察系统，所以所有的数据变更触发都是独立的，除非它们之间有明确的依赖关系。Vue.js中指令和组件的概念区分得更为清晰。指令只负责封装DOM 操作，而组件代表一个自给自足的独立单元 它拥有自己的视图和数据逻辑。在 Angular 中它们两者间有不少概念上的混淆。13.Vue.js和 React.js有什么区别 ?React.js和 Vue.js确实有一些相似它们都提供数据驱动、可组合搭建的视图组件。然而，它们的内部实现是完全不同的。React 是基于 Virtual DOM一种在内存中描述DOM 树状态的数据结构。 React 中的数据通常被看作是不可变的，而 DOM 操作则是通过 Virtual DOM的 diff来计算的。与之相比， Vue.js中的数据默认是可变的，而数据的变更会直接出发对应的DOM 更新。相比于 Virtual DOM ，Vue.js使用实际的 DOM 作为模板，并且保持对真实节点的引用来进行数据绑定。Virtual DOM提供了一个函数式的描述视图的方法，这很cool 。因为它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图通与数据的同步。它也开辟了JavaScript同构应用的可能性。收集于网络，如有侵权请联系管理员删除精品文档实话实说，我自己对React的设计理念也是十分欣赏的。但React有一个问题就是组件的逻辑和视图结合得非常紧密。对于部分开发者来说，他们可能觉得这是个优点，但对那些像我一样兼顾设计和开发的人来说，还是更偏好模板，因为模板能让我们更好地在视觉上思考设计和CSS。JSX 和 JavaScript逻辑的混合干扰了我将代码映射到设计的思维过程。相反，Vue.js通过在模板中加入一个轻量级的DSL ( 指令系统 ) ，换来一个依旧直观的模板，且能够将逻辑封装进指令和过滤器中。React 的另一个问题是：由于DOM 更新完全交由 Virtual DOM管理，当你真的想要自己控制DOM 是就有点棘手了（虽然理论上你可以，但这样做时你本质上在对抗 React的设计思想）。对于需要复杂时间控制的动画来说这就变成了一项很讨人厌的限制。在这方面，Vue.js允许更多的灵活性，并且有不少用Vue.js构建的富交互实例、收集于网络，如有侵权请联系管理员删除