前端框架面试题-蒲公英云

Vue**面试题**

node**你了解吗？**

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。实质是对Chrome V8引擎进行了封装，用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

Node**的优点**

它是一个Javascript运行环境
依赖于Chrome V8引擎进行代码解释
事件驱动
非阻塞I/O
轻量、可伸缩，适于实时数据交互应用
单进程，单线程

缺点：

不适合CPU密集型应用；CPU密集型应用给Node带来的挑战主要是：由于JavaScript单线程的原因，如果有长时间运行的计算（比如大循环），将会导致CPU时间片不能释放，使得后续I/O无法发起；
只支持单核CPU，不能充分利用CPU
可靠性低，一旦代码某个环节崩溃，整个系统都崩溃
开源组件库质量参差不齐，更新快，向下不兼容
Debug不方便，错误没有stack trace
React**你了解吗**

React**得到了Facebook社区的支持，使得构建交互式UI非常容易。** React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

优点：

速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
1. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
2. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
  1. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
  2. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

1. *兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

**缺点：** 1. React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

vue**了解吗？**

Vue.js是一个开源JavaScrip渐进式框架，能够开发单页面应用程序。它还可以用作Web应用程序框架，旨在简化Web开发。

优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。

　　　　 2. 快速：异步批处理方式更新 DOM。

　　　　 3. 组合：用解耦的、可复用的组件组合你的应用程序。

　　　　 4. 紧凑：~18kb min+gzip，且无依赖。

　　　　 5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。

　　　　 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点： 1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。

　　　　 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

　　　　 3. 不支持IE8：

angular**了解吗？**

angularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

angularJS的特性如下：1.良好的应用程序结构 2.双向数据绑定 3.指令 4.HTML模板 5.可嵌入、注入和测试

优点： 1.模板功能强大丰富，自带了极其丰富的angular指令。

2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；

3.自定义指令，自定义指令后可以在项目中多次使用。

4.ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

5.angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点： 1. angular 入门很容易但深入后概念很多, 学习中较难理解.

文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
DI 依赖注入如果代码压缩需要显示声明.

5.mvc**模式和mvvm模式**

1.MVC模式

mvc即model-view-controller（模型-视图-控制器）

2.mvvm模式

mvvm即Model-View-ViewModel

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

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

7.vue**生命周期总共有几个阶段？**
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

8.**第一次页面加载会触发哪几个钩子？**
答：会触发下面这几个beforeCreate, created, beforeMount, mounted 。

9.DOM 渲染在哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

10.**什么是vue生命周期？**

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

beforecreate : 完成实例初始化，初始化非响应式变量，this指向创建的实例；可以在这加个loading事件；data computed watch methods上的方法和数据均不能访问

created：实例创建完成，完成数据(data props computed)的初始化导入依赖项。可访问data computed watch methods上的方法和数据未挂载DOM,不能访问$el,$ref为空数组，可在这结束loading，还做一些初始化，实现函数自执行,可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中

berofeMount：有了el,编译了template|/outerHTML能找到对应的template,并编译成render函数

mounted**：**完成创建vm.$el，和双向绑定，完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作即有了DOM 且完成了双向绑定可访问DOM节点,$ref可在这发起后端请求，拿回数据，配合路由钩子做一些事情；可对DOM 进行操作

beforeUpdate**：**数据更新之前可在更新前访问现有的DOM,如手动移除添加的事件监听器；

updated :完成虚拟DOM的重新渲染和打补丁；组件DOM 已完成更新；可执行依赖的dom 操作注意：不要在此函数中操作数据，会陷入死循环的。

activated:在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用

Activated**：**钩子触发

deactivated ：for keep-alive 组件被移除时使用

beforeDestroy：在执行app.$destroy()之前可做一些删除提示，如：你确认删除XX吗？可用于销毁定时器，解绑全局时间销毁插件对象

destroyed ：当前组件已被删除，销毁监听事件组件事件子实例也被销毁，这时组件已经没有了，你无法操作里面的任何东西了。

11Vue**实现数据双向绑定的原理？**

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

12.**父组件与子组件传值**

父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数

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

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

14.Vue**的路由实现**

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 错误。

vue**路由的钩子函数**

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

16.vuex**是什么？怎么使用？哪种功能场景使用它？**

只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，….. export 。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

State：Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations：mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters：类似vue的计算属性，主要用来过滤一些数据。
action ：actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

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

17.vue**如何自定义一个过滤器？**

{ {msg| capitalize }}

var vm=new Vue({

el:"\#app",
data:\{
    msg:''
\},
filters: \{
  capitalize: function (value) \{
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  \}
\}

})

18.**对keep-alive 的了解？**

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

19.css**只在当前组件起作用**
答：在style标签中写入scoped变成当前页面可以得css 例如：

20.v-if 和 v-show 区别
答：v-if按照条件是否渲染,在页面上标签不存在了，v-show是display的block或none；

21.$route**和$router**的区别
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

22.vue.js**的两个核心是什么？**
答：数据驱动、组件系统

23.vue**几种常用的指令**
答：v-for循环、 v-if v-else判断、v-bind绑定、v-on事件、v-show显示、v-model双向绑定

24.vue**常用的修饰符？**
答：.lazy在“change”时更新数据；.number输入值转为数值类型；.trim自动过滤用户输入的首尾空白字符.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

25.v-on 可以绑定多个方法吗？
答：可以

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

27.**什么是vue**的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10.vue等单页面应用及其优缺点
答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

28.**构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？**

ue-cli依赖的 Node.js 环境安装

WebPack：模块打包机，它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

29vue-cli 工程常用的 npm 命令有哪些？

node -v 查询版本号

npm install -g vue-cli 安装脚手架

vue init webpack 项目名通过脚手架创建项目

npm start 运行项目

请说出vue-cli**工程中每个文件夹和文件的用处**

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaXNpeHVlMTk4NzAyMjE_size_16_color_FFFFFF_t_70

vue**中 key 值的作用**

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

vue**如何监听键盘事件中的按键？**

指定键盘值进行调用

vue**中对象更改检测的注意事项**

Vue无法检测到对象属性的添加和删除。对于已经创建的实例，Vue 不能动态添加根级别的响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

Vue 不能动态添加根级别的响应式属性：

var vm = new Vue({

data: { a: 1}

})

vm.b = 2;// vm.a现在是响应式的，vm.b不是响应式的

向嵌套对象添加响应式属性：

var vm = new Vue({

data: {

userProfile: \{
  name: 'Anika'
\}

}

})// 问题

vm.userProfile.age = 27;// 非响应// 解决方案

Vue.set(vm.userProfile, ‘age’, 27);// 方案一

vm.$set(vm.userProfile, ‘age’, 27);// 等同方案一

vm.userProfile = Object.assign({}, vm.userProfile, {

age: 27,

favoriteColor: ‘Vue Green’

});// 方案二//方案二是用两个对象的属性创建一个新的对象，注意不要使用以下方式，因为此种方式是与vm.userProfile.age = 27的本质是一样的，均是非响应属性。Object.assign(vm.userProfile, {

age: 27,

favoriteColor: ‘Vue Green’

})

vue**等单页面应用及其优缺点**

优点：

1、具有桌面应用的即时性、网站的可移植性和可访问性。

2、用户体验好、快，内容的改变不需要重新加载整个页面。

3、基于上面一点，SPA相对对服务器压力小。

4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。

5、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；

缺点：

1、不利于SEO。（如果你看中SEO，那就不应该在页面上使用JavaScript，你应该使用网站而不是Web应用）

2、初次加载耗时相对增多。

3、导航不可用，如果一定要导航需要自行实现前进、后退。

36.**完整的 vue-router 导航解析流程**

导航解析流程:

导航被触发,在失活的组件里调用离开守卫;调用全局的 beforeEach 守卫;在重用的组件里调用 beforeRouteUpdate 守卫;在路由配置里调用 beforeEnter;解析异步路由组件;在被激活的组件里调用 beforeRouteEnter;调用全局的 beforeResolve 守卫 (2.5+);导航被确认;调用全局的 afterEach 钩子;触发 DOM 更新;用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

35.**谈谈node Event Loop（事件循环）机制**

同步任务都在主线程上执行，形成一个执行栈

主线程之外，还存在一个任务队列。只要异步任务有了运行结果，就在任务队列之中放置一个事件。

一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列,将队列中的事件放到执行栈中依次执行

主线程从任务队列中读取事件，这个过程是循环不断的

整个的这种运行机制又称为 Event Loop (事件循环)

36.**前后端分离的思想**

在前后端分离的模式中，后端看不到项目里的页面，后端给前端提供接口，前端通过后端提供的接口进行也米娜的展示。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。在前后端分离的应用模式中，前端与后端的耦合度相对较低。在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。

前后段分离的优点

　　（1）：最大的好处就是前端JS可以做很大部分的数据处理工作，对服务器的压力减小到最小；

　　（2）：后台错误不会直接反映到前台，错误接秒较为友好；

　　（3）：由于后台是很难去探知前台页面的分布情况，而这又是JS的强项，而JS又是无法独立和服务器进行通讯的。所以单单用后台去控制整体页面，又或者只靠JS完成效果，都会难度加大，前后台各尽其职可以最大程度的减少开发难度。