前端试题整理

一：什么是闭包？闭包的用处？

（1）闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就

是将函数内部和函数外部连接起来的一座桥梁。

（2）闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

闭包的特性：

①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；

②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用。

闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

vue面试题

一：简述vue的理解

Vue是一个渐进式的轻量级框架，核心是关注视图层，是一个构建数据驱动的页面，将数据绑定视图上，vue提供数据和视图双向绑定原理使我们开发页面更简单，修改数据，视图自动更新。 vue是模块化和组块化，如果页面要更改数据之类的，就只在组件来修改就可以，vue有几大特点：（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块化 （6） 组件化Vue

通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架，可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能

过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理，变成我们想要的数据。

过滤器的本质 就是一个带有参数带有返回值的方法。

Vue组件的过程：组件可以提升整个项目的开发效率，能够把页面拆分为多个独立的模块，解决了效率低，难维护，复用性，等问题。

Vue是一个数据驱动页面的一个框架，基于MVVM模式，M指的是数据，V值得是视图，VM是视图模型，将数据绑定视图上（双向绑定）

Vue.js是一套构建用户界面的渐进式（没有强主张，没有多做职责之外的事。）框架。

Vue的生命周期

   生命周期就是钩子函数，主要是在什么时候来调用这些函数，比如是在创建，挂载，更新，销毁完成之后还是之前，初始化数据完成之前还是之后等

   从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列
过程，我们称这是 Vue 的生命周期
beforeCreate : 数据声明还没被调用时使用
created : vue渲染完毕后，所有数据和方法初始化后调用
mounted : 挂载元素之后

updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

BeforeMount 挂载开始之前被调用

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

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

3.vue的优点是什么？

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

5.vue组件之间的传值  

1.父组件给子组件传值 （props） 

2.子组件给父组件传值 （emit）

3.兄弟组件间的传值（on和emit）

6.框架的好处

提高代码的质量，开发速度

提高代码的复用率

降低模块之间的耦合度（高内聚低耦合）

二。Vue.js开发环境

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘宝npm镜像安装相关依赖

 在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装...

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装...

            2).输入：vue，回车，若出现vue信息说明表示成功

4.创建项目

在cmd里输入：vue init webpack vue_test(项目文件夹名)，回车，等待一小会儿

5.安装依赖

在cmd里  1).输入：cd vue_test（项目名），回车，进入到具体项目文件夹

       2).输入：cnpm install，回车，等待一小会儿

回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）

6.测试环境是否搭建成功

方法1：在cmd里输入：cnpm run dev

方法2：在浏览里输入：localhost:8080(默认端口为8080)

三、vue中常见的指令有哪些?

v-for/v-if/v-else-if/v-else/v-on/v-bind/v-show/v-html/v-model

四、双向数据绑定是如何实现的？好处有哪些

v-model

好处？

组件是一个具有特定功能的 可被反复使用的视图，

各个指令实现数据和视图的绑定，解耦（降低耦合度的过程）

组件有什么好处？

封装好了组件，提高了代码复用率

提高了代码的可读性

降低了测试难度

五、Vue实例中常见的属性有哪些？

data 存储数据

methods 方法

directives 指令

filters 过滤器/管道

router 路由

props 接收调用该组件时传来的数据

watch 监听双向数据绑定的数据的变化

computed 用在逻辑复杂的地方，计算属性是基于它们的依赖进行缓存的，提高性能

六、过滤器

本质是一个带有参数 有返回值的方法;支持多重过滤

<any>{ {表达式 | myFilter(arg1,arg2) | myFilter2}}</any>

七、refs

1、给子组件要指定一个属性 <son ref="mySon"></son>

2、通过引用名字mySon怎么得到子组件的实例？ this.$refs.mySon

1Vue组件化的理解

首先组件的基本构成分别是：样式结构，行为逻辑，数据。web中的组件其实就是页面组成的一部分，每个组件都会提供一些对外接口，允许使用者设置和调整参数属性，可以将不同功能的组件结合在一起，快速的构成一个符合实际需求的应用。

 

2Vue路由的理解

首先Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是通过超链接来实现页面的切换和跳转。在Vue-router中是路径之间的切换，也就是组件的切换。

 

3你对Vue钩子函数的理解

vue-router的导航钩子主要用来拦截导航，让他完成跳转或取消。

 

4如何让css只在当前组件中起作用

在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在style中写入scoped：<style scoped></style>

 

5created和mounted区别

created实例创建完成之后的钩子函数；$el属性不可见为undefined

mounted将编译好的HTML挂载到页面完成后执行的钩子函数，在整个实例生命周期中只执行一次；$el已创建，同时DOM结构已生成

 

6mounted和created分别什么时候用

只有ajax数据请求放在created里面就可以了，这样可以及早发请求获取数据；如果有依赖DOM的情况下，就放到mounted里面

 

7Vue和angular分别采用什么技术实现双向数据绑定？

AngularJS 采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

VueJS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

 

8v-show和v-if区别

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好

 

9<keep-alive></keep-alive>的作用是什么

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

 

10Vue中引入组件的步骤

1.采用ES