前端框架面试题

川长思鸟来 2023-06-15 07:25 16阅读 0赞

**Vue****面试题**

1.  **node****你了解吗？**

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

**Node****的优点**

1. 它是一个Javascript运行环境

2. 依赖于Chrome V8引擎进行代码解释

3. 事件驱动

4. 非阻塞I/O

5. 轻量、可伸缩，适于实时数据交互应用

6. 单进程，单线程

**缺点：**

1. 不适合CPU密集型应用；CPU密集型应用给Node带来的挑战主要是：由于JavaScript单线程的原因，如果有长时间运行的计算（比如大循环），将会导致CPU时间片不能释放，使得后续I/O无法发起；

2. 只支持单核CPU，不能充分利用CPU

3. 可靠性低，一旦代码某个环节崩溃，整个系统都崩溃

4. 开源组件库质量参差不齐，更新快，向下不兼容

5. Debug不方便，错误没有stack trace

1.  **React****你了解吗**

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

**优点：**

1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。

4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的[架构][Link 4]，它随着React视图库的开发而被Facebook概念化。

5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

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

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

1.  **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：

1.  **angular****了解吗？**

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

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

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

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

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

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

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

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

2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.

3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.

5. 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时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候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][http_www.xxx.com]，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState，replaceState可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。  
history 模式下，前端的 URL 必须和实际向后端发起请求的URL一致，如 [http://www.xxx.com/items/id][http_www.xxx.com_items_id]。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

1.  **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 \}\}</div>

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 例如：<style scoped></style>

**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   运行项目

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaXNpeHVlMTk4NzAyMjE_size_16_color_FFFFFF_t_70][]

1.  **vue****中 key** **值的作用**

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

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

<input v-on:keyup.13="fun">指定键盘值进行调用

1.  **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'

\})

1.  **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完成效果，都会难度加大，前后台各尽其职可以最大程度的减少开发难度。

[Link 1]: https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1%E7%AB%AF/6492316
[PHP]: https://baike.baidu.com/item/PHP/9337
[Python]: https://baike.baidu.com/item/Python/407313
[Perl]: https://baike.baidu.com/item/Perl/851577
[Ruby]: https://baike.baidu.com/item/Ruby/11419
[Link 2]: https://baike.baidu.com/item/%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80/1379708
[Link 3]: https://baike.baidu.com/item/%E4%BA%8B%E4%BB%B6%E9%A9%B1%E5%8A%A8/9597519
[I_O]: https://baike.baidu.com/item/I/O/84718
[Link 4]: http://lib.csdn.net/base/16
[http_www.xxx.com]: http://www.xxx.com/
[http_www.xxx.com_items_id]: http://www.xxx.com/items/id
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaXNpeHVlMTk4NzAyMjE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121144348538.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaXNpeHVlMTk4NzAyMjE=,size_16,color_FFFFFF,t_70
[Vue]: https://www.baidu.com/s?wd=Vue&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd