前端面试题一：代码版本控制工具、TypeScript、前端构建工具、前端框架Vue

目录

一、代码版本控制工具

二、TypeScript

三、前端构建工具

四、前端框架Vue

---

一、代码版本控制工具

1.git中有哪些常用的命令？

初始化仓库：git init

添加暂存区：gia add 文件名

提交到本地仓库：git commit -m '注释'

推送到远程仓库：git push 仓库地址 分支名称

拉取远程仓库代码：git pull

克隆仓库：git clone 仓库地址

建分支：git branch 分支名称

换分支：git checkout 分支名称

看分支：git branch

合并分支：git merge 分支名称

看日志：git log

查看所有日志：git reflog

版本回退：git reset --hard 版本号（commit-id可以通过git log --oneline获取）

2.git与svn有什么不同？

git是分布式仓库管理工具，每个人本地都有一个本地仓库，svn是一个集中式仓库管理工具，仓库只有一个。svn一般需要服务端给每个人分配账户和密码，git是使用ssh公钥/密钥来区分不同程序员的。

3.在线git代码托管平台有哪些？

github gitee gitlab等等

二、TypeScript

1.typescript有哪些数据类型？

Number、 String 、Boolean、 Object、 Undefined、 Null 、Any（任意类型）

Never、元组，枚举、数组

2.TypeScript和JavaScript的区别？

TypeScript是JavaScript的一个超集，是es6的实现，支持所有es6的语法，TypeScript只是在开发过程中编写的一种中间语言，浏览器并不能直接解析TypeScript，上线以后需要将TypeScript转换成JavaScript。

三、前端构建工具

1.你了解到前端有哪些项目构建工具？

webpack gulp grunt

2.webpack和gulp在进行代码合并的时候还有什么不同？

webpack是基于commonjs模块化规范代码进行代码合并，而gulp只是简单的代码合并。

3.列举几个gulp中常见的插件？

合并文件：gulp-concat

压缩js：gulp-uglify

文件重命名：gulp-rename

压缩css：gulp-minify-css

压缩html：gulp-hmltmin

启动开发服务器：gulp-connect

拷贝文件：gulp-copy

四、前端框架Vue

1.vue中如何封装一个组件？

首先定义一个后缀名为.vue的文件，文件内部还是三部分组成：template模板部分，script逻辑部分，style样式部分。这三部分是组件的核心部分，组件需要哪些结构，在模板部分书写，需要什么样的外观样式，通过style部分书写，有哪些行为在script部分书写，一定要在script部分使用es6模块化的导出语法（export default{})进行导出，然后在需要调用组件的地方使用es6模块化导入语法导入即可，组件需要哪些参数，直接在调用的部分进行传递即可，主要逻辑还是在组件中完成。

2.Vue中computed和watch的区别？

computed是计算属性，可以根据data中的数据成员，动态计算出一个新的数据成员，计算属性必须有返回值；

watch是监视器，可以监视data中某一个数据成员的改变或路由中的某些属性的改变，可以根据这个改变，做一些其他操作，不仅仅局限于更新其他相关数据。

3.谈谈对Vue中插槽的理解？

Vue的插槽分为三种：匿名插槽、具名插槽、作用域插槽。

通过插槽可以动态指定某一个组件模板部分的渲染，在调用组件的时候，在组件的调用标签中间传递了什么样的标签结构，那么该组件就会把传递的标签结构放在对应的模板部分进行渲染。

4.v-show和v-if在隐藏一个元素的时候有什么不同？应该如何来选择？

v-show是通过css的方式来隐藏元素，v-if是根据条件是否成立决定是否要创建元素。

如果某个元素需要频繁切换显示状态的话，建议使用v-show，因为频繁创建销毁DOM需要性能开销。

5.什么是vuex，在哪种场景下使用？

vuex是针对vue的一个状态管理工具，有以下几个核心部分：

sate：存储状态数据

mutations：更新数据的方法

actions：调用mutations中的方法，更新state中的数据

getters：对sate中的数据进行预处理

当组件的关系比较复杂时，可以使用vuex简化组件间的传值。

6.说说Vue路由的使用步骤？

第一步：下载路由模块vue-router

第二步：创建路由对象

第三步：配置路由规则

第四步：将路由对象注册为vue实例对象的成员属性

7.谈谈对MVVM的理解？

MVVM由三部分M（model数据层）、V （view视图层）、VM（view-model视图模型层）组成，是一种框架的设计思想。vue就是基于mvvm来设计的，其中：

M层就是负责初始化数据；

V层负责页面展示；

VM层用来连接V层和M层，将数据层的数据传递到视图层进行展示，将视图层的操作传递到数据层进行持久化。

8.Vue的生命周期？

创建阶段：执行一次

BeforeCreate：开始进行一些数据和方法的初始化操作，data中的数据和methods中的方法还不能调用；

Created：已经完成数据和方法的初始化，data中的数据和methods中的方法可以使用了

BeforeMount：开始虚拟渲染DOM

Mounted：已经完成了虚拟DOM的渲染，可以操作DOM了，只执行一次

运行阶段：执行多次

BeforeUpdate：data中的数据即将被更新，会执行多次

Updated：data中的数据已经更新完毕，会执行多次

销毁阶段：只执行一次

BeforeDestroy：Vue实例即将被销毁，此时data中的数据和methods中的方法依然处于可用状态

Destroyed：Vue实例已经销毁，此时data中的数据和methods中的方法已经不可用。

9.Vue实现数据双向绑定的原理？

Vue是使用数据劫持，结合发布者订阅者模式实现双向数据绑定的。

实现步骤：

1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者

2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图

3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者

10.Vue创建组件的时候，data为什么要使用匿名函数，return一个对象？

因为对象是一个引用数据类型，在内存中只有一份，如果data的值直接是一个对象的话，那么后期组件在不同的地方多次调用的时候，会相互产生影响，因为每一次调用的data对象是一样的，使用函数返回对象，可以保证组件的每一次调用都会创建一个新的对象，这样组件的每一次调用不会相互产生影响。

11.Vue中实现父组件向子组件传递数据？

第一步：在子组件的调用标签上声明一个自定义属性，属性值来自父组件的data

第二步：在子组件的定义部分声明一个属性props，值是一个数组，将自定义属性的名字在props中进行声明，在子组件的模板部分可以使用props中声明过的数据。

父组件：

<child :msgFromParent="msg">

data:function(）{

return{

        msg:"父传给子"

}}

子组件：

props:['msgFromParent']

<h1>{{msgFromParent}}</h1>

12.在Vue中如何实现子组件向父组件传递数据？

第一步：在子组件的调用标签上通过v-on动态绑定一个自定义事件，自定义事件的处理函数必须在父组件的methods中提前声明，这个函数需要一个形参，来接受子组件传递过来的数据。

第二步：在子组件中通过this.$emit（自定义事件，数据）触发自定义事件的执行，此动作可以放在子组件的created/mounted声明周期中，可以放在某个事件处理函数中。

13.Vue中如何实现兄弟组件间的传递数据？

第一步：声明一个空的Vue实例对象comm，作为实践中心的角色；

第二步：在acom组件中通过comm.$emit（自定义事件，数据）的方式触发事件（此操作可以放在某个事件处理函数或者acom组件的生命周期函数created/mounted中）

第三步：在bcom组件中通过comm.$on（自定义事件，function(data){}）来监听自定义事件的执行（操作可以放在bcom组件的声明周期函数created/mounted中）。

14.Vue中有几种路由模式？

Vue中的路由模式有两种：hash和history，默认是hash模式。

可以在创建路由对象的时候，使用mode属性来切换路由模式

const router = new Router({mode:'history'})

15.Vue路由导航守卫是什么，以及应用场景？

路由导航守卫是在页面进行路由跳转的时候进行的一些处理，比如拦截。

vue-router提供了下面几种路由导航守卫：

全局前置守卫：

const router  = new VueRounter({...})

router.beforeEach((to,from,next)=>{

       // from从哪里来

        //to到哪里去

        //next是否要放行

})

全局后置钩子：

const router  = new VueRounter({...})

router.afterEach((to,from)=>{

       // from从哪里来

        //to到哪里去

})

路由独享守卫：

const router  = new VueRounter({

routes:[

{

        path:'/foo',

        component:Foo,

        beforeEnter:(to,from,next)=>{}

},

        ]

})

16.Vue如何定义一个过滤器？

定义全局过滤器：

Vue.filter('过滤器名称’，function(input){return input});

定义一个局部过滤器;

new Vue({

        filters:{dateFmt:function(input){return 'yyyy-mm-dd';}}

})

17.怎么定义vue-router的动态路由？怎么获取路由传递过来的参数？

const router = new VueRouter({

        router:[

        {

                path:'/product/:id',

                component:Product

        }

]

})

//获取参数

this.$route.params.id

18.Vue路由模块中的$route和$router的区别？

$route中存储的是与路由相关的属性（如$route.params,$route.query）

$router中存储的是和路由相关的方法（如$router.push(),$router.go()）

19.Vue中v-for指令循环遍历中key属性的作用？

key属性的作用是在数据层和视图层之间建立一一对应的关系，方便后期对页面进行局部更新，如果某一条胡数据发生改变，只更新当前数据对应的DOM元素。

20.Vue有哪些常见的事件修饰符？

.prevent：阻止默认事件

.stop：阻止冒泡

.once：事件执行一次

.self：只当在event.target是当前元素自身时触发函数

21.Vue中常见的指令？

v-model：实现双向数据绑定

v-bind：绑定属性---->：

v-on：注册事件------->@

v-html：设置标签内容（允许内容html）

v-text：设置标签内容（不允许内容html）

v-clack：解决插值表达式闪烁问题

v-for：循环遍历数组或对象

22.Vue中如何解决插值表达式闪烁问题？

使用v-html或v-text替代插值表达式

使用v-clack解决插值表达式闪烁

23.Vue中如何实现给样式添加作用域？说明其实现原理。

Vue中要给样式添加作用域，只需要给style标签添加scoped属性即可。

实现原理：添加了scoped属性的style标签内的样式会被改写成一个交集选择器，会在原来的类名基础上添加一个随机属性（如，.container[v-abcde]），同时引用该类名的标签也会添加一个相同的属性（如，<div class="container" v-abcde></div>）这样的话，这个类名就可以对引用它的标签生效，同时不会影响其他同类名的标签。

24.Vue中如何动态添加一个路由规则？

使用router.addRoutes([{path:'',component:''}])

25.Vue中有何优化页面的加载效率？

使用路由懒加载和组件懒加载

不要打包一些公共的依赖

使用CDN加载这些依赖文件

26.什么是路由懒加载？路由懒加载有什么好处？

路由懒加载是指通过异步的方式来加载对应的路由组件（默认情况是将所有的组件全部加载并打包）

路由懒加载的好处：可以提高页面的加载速度，尤其是首页的加载速度（因为使用路由懒加载后，加载首页的时候，就不需要加载其他页面对应的组件，在需要的时候再加载）

27.Vue中如何触发一个自定义事件？

通过this.$emit(event,'数据')可以触发自定义事件的执行。

28.Vue中如何监听自定义事件的执行？

通过this.$on(event,callback)可以监听自定义事件的执行

29.Vue如何移除自定义事件？

通过this.$off(event,callback)可以移除一个自定义事件，如果某些特殊场景下，一个事件被触发一次后就需要将其移除，可以使用this.$once(event,callback)进行事件注册。

30.vm.$mount(selector)方法的作用是什么？

手动将一个vue实例挂载到页面上。

31.Vue中keep-alive组件的作用是什么？

keep-alive可以将被包裹的组件暂存在内存中，当页面切换的时候，组件不会被重复的创建和销毁，从而可以提高整体性能，同时也可以保存组件的一些状态。

32.Vue如何手动销毁一个vue实例？

调用vm.$destory()可销毁一个vue实例（清理它与其他实例的连接，解绑它的全部指令及事件监听器）

33.Vue中有哪些内置的组件？

component ,slot,transition,transition-group,keep-alive

34.vue实例中有哪些属性？

vm.$data：可以获取vm实例对象data中的数据

vm.$props：可以获取vm组件接收到的props对象数据

vm.$el：可以获取vm实例对象的根dom元素

vm.$refs可以获取vm实例中注册过ref特性的所有dom元素和组件

35.Vue.use(plugin)的作用是什么？使用的时候注意哪些问题？

Vue.use的作用是安装一个Vue插件，该方法需要在调用new Vue()之前被调用。

36.vue中混入（mixin）的作用？

两个对象（组件之间）之间有重复代码：采用混入的方法解决

混入（mixin）提供了一种非常灵活的方式，来分发Vue组件的可复用功能。

一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并成一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前被调用。

37.什么是ssr?如何实现ssr?

ssr是全拼server side rendering，中文意思：服务器渲染。让页面的渲染在服务端完成，生产环境必须部署nodeJS的环境，因为服务端渲染必须借助nodeJS来完成，vue中可以使用nuxt框架来实现服务端渲染。

38.什么是SPA？

SPA--->Single Page Application，单页面应用程序，使用vue、react、angular创建的项目都属于SPA，因为整个项目只有一个页面，其他页面都是在该页面的基础上局部刷新而来的。

传统方式创建的项目MPA多页面应用程序。

39.使用vue、react、angular开发的SPA单页面应用有什么特点？

单页面应用虽然性能方面得到了提升，但是有一个致命的缺点就是不利于seo，搜索引擎几乎不会抓取单页面应用。

SEO是英文 Search Engine Optimization 的缩写，中文意思“搜索引擎优化”。SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，从而获得更多流量，最终达成品牌建设或者产品销售的目的。

不管是百度还是谷歌等百科网站，对于SEO解释都是大同小异，简单来说就是通过一定技术手段提高网站关键词搜索排名获取更多展示，然后从自然搜索结果获得更多网站流量的过程。