前端面试题（带答案）.docx

《前端面试题（带答案）.docx》由会员分享，可在线阅读，更多相关《前端面试题（带答案）.docx（27页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、前端试题（带答案）前端试题（带答案）vue什么是vue命周期？答： Vue命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其命周期进的，在命周期的不同阶 段调对应的钩函数可以实现组件数据管理和DOM渲染两重要功能。vue命周期的作是什么？答：它的命周期中有多个事件钩，让我们在控制整个Vue实例的过程时更容易形成好的逻辑 vue的命周期的个钩函数？ beforeCreat() 创建前 在new个vue实例后，只有些默认的命周期钩和默认事件，其他的东西都还没创建。在此命周期执的时候，data和methods中的数据都还没有初始化。不能在这个阶段使data中的数据和met

2、hods中的法 created（）被创建 data 和 methods都已经被初始化好了，可以调了 beforeMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页中，此时，页还是旧的 mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进到了运阶段。 如果我们想要通过插件操作页上的DOM节点，最早可以在和这个阶段中进 beforeupdate（）更新前 页中的显的数据还是旧的，data中的数据是更新后的， 页还没有和最新的数据保持同步 updated（）更新 页显的数据和data中的数据已经保持同步了，都是最新的 beforeDestroy() 销

3、毁前 Vue实例从运阶段进到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 都是处于可状态。还没有真正被销毁 destroyed（）被销毁 这个时候上所有的 data 和 methods ， 指令， 过滤器 都是处于不可状态。组件已经被销毁了。第次页加载会触发哪个钩？答: 第次页加载时会触发 beforeCreate, created, beforeMount, mounted 这个钩. 简述每个周期具体适合哪些场景？答：beforecreate : 可以在这加个loading事件，在加载实例时触发created : 初始化完成时的事件写在这，如在这结束load

4、ing事件，异步请求也适宜在这调mounted : 挂载元素，获取到DOM节点updated : 如果对数据统处理，在这写上相应函数beforeDestroy : 可以做个确认停事件的确认框nextTick : 更新数据后即操作domcreated和mounted的区别?答：created:在模板渲染成html前调，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调，通常是初始化页完成后，再对html的dom节点进些需要的操作。DOM渲染在哪个周期中已经完成？ 答：mountedVue路由mvvm框架是什么？mvvm即Model-View-ViewModel，m

5、vvm的设计原理是基于mvc的MVVM是Model-View-ViewModel的缩写，Model代表数据模型负责业务逻辑和数据封装，View代表UI组件负责界和显，ViewModel监听模型数据的改变和控制视图为，处理户交互，简单来说就是通过双向数据绑定把View层和Model层连接起 来。在MVVM架构下，View和Model没有直接联系，是通过ViewModel进交互，我们只关注业务逻辑，不需要动操作DOM， 不需要关注View和Model的同步作vue-router是什么？有哪些组件？ Vue Router 是 Vue.js 官的路由管理器。它和 Vue.js 的核深度集成，让构建单页

6、应变得易如反掌。 和和3. active-class 是哪个组件的属性？active-class是router-link终端属性，来做选中样式的切换，当router-link标签被点击时将会应这个样式4 怎么定义vue-router的动态路由？怎么获取传过来的值？动态路由的创建，主要是使path属性过程中，使动态路径参数，以冒号开头，如下：path: /details/:idname: Details components: Details访问details录下的所有件，如果details/a，details/b等，都会映射到Details组件上。当匹配到/details下的路由时，参数值会被

7、设置到this.route.params下，所以通过这个属性可以获取动态参数console.log(this. route.params.id)5. vue-router有哪种导航钩？ 全局前置守卫const router = new VueRouter() router.beforeEach(to, from, next) = / to do somethings)to:Route,代表要进的标，它是个路由对象。from:Route,代表当前正要离开的路由，也是个路由对象next:Function,必须需要调的法，具体的执效果则依赖next法调的参数next():进管道中的下个钩，如果全部的

8、钩执完了，则导航的状态就是comfirmed（确认的） next(false):终端当前的导航。如浏览器URL改变，那么URL会充值到from路由对应的地址。next(/)|next(path:/):跳转到个不同的地址。当前导航终端，执新的导航。next 法必须调，否则钩函数法resolved 全局后置钩router.afterEach(to, from) = / to do somethings)后置钩并没有next函数，也不会改变导航本。 路由独享钩beforEnterconst router = new VueRouter( routes: path: /home, component:

9、 Home，beforeEnter: (to, from, next) = / to do somethings/ 参数与全局守卫参数样)组件内导航钩const Home = template: div/div ,beforeRouteEnter(to, from, next)/ 在渲染该组件的对应路由被 confirm 前调/ 不能获取组件实例 this，因为当守卫执前，组件实例还没被创建,beforeRouteUpdate(to, from, next)/ 在当前路由改变，但是该组件被复时调/ 例：对于个动态参数的路径 /home/:id,在/home/1 和 /home/2 之间跳转的时

10、候/ 由于会渲染同样的 Home 组件，因此组件实例会被复，这个钩就会在这个情况下被调。/ 可以访问组件实例 this,beforeRouteLeave(to, from, next)/ 导航离开该组件的对应路由时调/ 可以访问组件实例 thisbeforeRouterEnter不能访问this，因为守卫在导航确认前被调，因此新组建还没有被创建,可以通过传个回调给 next 来访问组件实例。在导航被确认的时候执回调，并把实例作为回调的法参数。const Home = template: div/div ,beforeRouteEnter(to, from, next) next( vm = /

11、 通过 vm 访问组件实例)$route和 $router的区别是什么？router为VueRouter的实例，是个全局路由对象，包含了路由跳转的法、钩函数等。route 是路由信息对象|跳转的路由对象，每个路由都会有个route对象，是个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。vue-router响应路由参数的变化 watch 检测/ 监听当前路由发变化的时候执watch: $route(to, from) console.log(to.path)/ 对路由变化做出响应 组件内导航钩函数beforeRouteUpd

12、ate(to, from, next)/ to do somethingsvue-router响应路由参数的变化 watch 检测/ 监听当前路由发变化的时候执watch: $route(to, from) console.log(to.path)/ 对路由变化做出响应 组件内导航钩函数beforeRouteUpdate(to, from, next)/ to do somethingsvue-router的两种模式 hasho 原理是onhashchage事件，可以在window对象上监听这个事件window.onhashchange = function(event) console.lo

13、g(event.oldURL, event.newURL)let hash = location.hash.slice(1) historyo 利了HTML5 History Interface 中新增的pushState()和replaceState()法。o 需要后台配置持。如果刷新时，服务器没有响应响应的资源，会刷出404，vue-router实现路由懒加载（动态加载路由） 把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项的加载速 度，提效率const router = new VueRouter( routes: path: /ho

14、me, name: Home，component:() = import(/views/home)Vue常见试题1. vue 的优点？vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运速度快。2. vue组件向组件传递数据？组件向组件出传递数据，使定义事件的式。组件向组件传递数据，使props属性的式。3. vue组件向组件传值?v-if和v-show的相同点和不同点? 1、相同点：v-show 和 v-if 都能控制元素的显和隐藏。2、不同点：2.1实现本质法不同v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏v

15、-if 是动态的向 DOM 树内添加或者删除 DOM 元素2.2）编译的区别v-show 其实就是在控制 css v-if 切换有个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和组件2.4）性能较v-show 只编译次，后其实就是控制 css， v-if 不停的销毁和创建，故 v-show 性能更好。4、总结（适场景）：如果要频繁切换某节点时，使 v-show（论 true 或者 false 初始都会进渲染，此后通过 css 来控制显隐藏，因此切换开销较，初始开销较），如果不需要频繁切换某节点时，使 v-if（因为懒加载，初始为 false 时，不会渲染，但是因为它是通过添加

16、和删除 dom 元素来控制显和隐藏的，因此初始渲染开销较，切换开销较）如何让css只在当前组件中起作？当前组件写成 的作是什么? 包裹动态组件时，会缓存不活动的组件实例,主要于保留组件状态或避免重新渲染。话: 如有个列表和个详情，那么户就会经常执打开详情=返回列表=打开详情这样的话列表和详情都是个频率很的页，那么就可以对列表组件使 进缓存，这样户每次返回列表的时候，都能从缓存中快速渲染，不是重新渲染vue如何获取并操作DOM元素法：直接给相应的元素加id,然后再document.getElementById(“id”);获取，然后设置相应属性或样式；法：使ref,给相应的元素加ref=“nam

17、e” 然后再this.$refs.name获取到该元素，并且可以直接调组件中定义的法；说出种vue当中的指令和它的法? 1、v-if：判断是否隐藏2、v-for：数据循环3、v-bind:class：绑定个属性4、v-model:实现数据双向绑定5、v-if v-show6、v-once 7、v-html: 8、v-cloak:vue-loader是什么？使它的途有哪些?vue-loader会解析件，提取出每个语块，如果有必要会通过其他loader处理，最后将他们组装成个commonjs模块； module.exports出个vue.js组件对象V-for 为什么必须使key?增加Key可以标

18、识组件的唯性，key的作主要是为了效的更新虚拟DOMaxios的基本概念及安装配置法?ajax:异步请求，是种需再重新加载整个页的情况下，能够更新部分页的技术axios:于浏览器和node.js的基于promise的HTTP客户端1.从浏览器制作XMLHttpRequests 2.让HTTP从node.js的请求3.持promise api 4.拦截请求和响应5. 转换请求和响应数据6. 取消请求7. 动转换成json数据8.客户端持防xsrf axios的安装：cmd命令进到vue项下，执npm install axios 然后执提npm install -save axios vue-ax

19、ios 配置法：打开vue的编辑器，找到当前项的main.js件，输： import axios from axiosVue.prototype.axios = axios 这时候还不能跨域请求，在config下的index.js输：proxyTable: /api: /使/api来代替http:/f.apiplus.c target: http:/127.0.0.1:5000/, /源地址changeOrigin: true, /改变源 ,允许跨域pathRewrite: /api: /路径重写12. axios解决跨域问题（vue-cli3)? vue中v-model的应及使详解?v-mo

20、del于表单数据的双向绑定Scss的安装和使？请说出vue.cli项中src录每个件夹和件的法？assets件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是个应主组件； main.js是件vue中computed和watch的区别，以及适场景？ computed：通过属性计算得来的属性1、computed内部的函数在调时不加()。2、computed是依赖vm中data的属性变化变化的，也就是说，当data中的属性发改变的时候，当前函数才会执，data中的属性没有改变的时候，当前函数不会执。3、computed中的函数必须retu

21、rn返回。4、在computed中不要对data中的属性进赋值操作。如果对data中的属性进赋值操作了，就是data中的属性发改变，从触发computed中的函数，形成死循环了。5、当computed中的函数所依赖的属性没有发改变，那么调当前函数的时候会从缓存中读取。 使场景：当个值受多个属性影响的时候购物车商品结算watch：属性监听1、watch中的函数名称必须要和data中的属性名致，因为watch是依赖data中的属性，当data中的属性发改变的时候，watch中的函数就会执。2、watch中的函数有两个参数，前者是newVal，后者是oldVal。 3、watch中的函数是不需要调的

22、。4、watch只会监听数据的值是否发改变，不会去监听数据的地址是否发改变。也就是说，watch想要监听引类型数据的 变化，需要进深度监听。“obj.name”()如果obj的属性太多，这种法的效率很低，obj:handler(newVal),deep:true-handler+deep的式进深度监听。5、特殊情况下，watch法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改 数组必须要splice()或者set。this.arr.splice(0, 1, 100) 修改arr中第0项开始的1个数据为100，this. set(this.arr,0,1

23、00)修改arr第0项值为100。6、immediate:true 页次加载的时候做次监听。使场景：当条数据的更改影响到多条数据的时候搜索框区别：1、功能上：computed是计算属性，watch是监听个值的变化，然后执对应的回调。2、是否调缓存：computed中的函数所依赖的属性没有发变化，那么调当前的函数的时候会从缓存中读取，watch在每 次监听的值发变化的时候都会执回调。3、是否调return：computed中的函数必须要return返回，watch中的函数不是必须要return。4、使场景：computed-当个属性受多个属性影响的时候，使computed-购物车商品结算。wat

24、ch当条数据影响多条数据的时候，使watch搜索框。v-on可以监听多个法吗？ 可以18. Vue.js中this.nextTick()的使？this.nextTick()将回调延迟到下次 DOM 更新循环之后执。在修改数据之后即使它，然后等待 DOM 更新。它跟全局法 Vue.nextTick 样，不同的是回调的 this 动绑定到调它的实例上。19. vue组件中data为什么必须是个函数？在 new Vue() 中，data 是可以作为个对象进操作的，然在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它17. vue中如何使event对象？18. Vue组

25、件间通信6种式（上找视频看）？19. 渐进式框架的理解?20. Vue中双向数据绑定是如何实现的?24. 单页与多页间的区别及优缺点?单页应（SPA），通俗点说就是指只有个主页的应，浏览器开始要加载所有必须的 html, js, css。所有的页内容都包含在这个所谓的主页中。但在写的时候，还是会分开写（页段），然后在交互的时候由路由程序动态载，单页的页跳转，仅刷新局 部资源。多应于pc端。多页（MPA），就是指个应中有多个页，页跳转时是整页刷新 单页的优点：1，户体验好，快，内容的改变不需要重新加载整个页，基于这点spa对服务器压较2，前后端分离3，页效果会较炫酷（如切换页内容时的专场动画）

26、单页缺点：1，不利于seo2，导航不可，如果定要导航需要实现前进、后退。（由于是单页不能浏览器的前进后退功能，所以需要建堆栈管理）3，初次加载时耗时多4，页复杂度提很多25. vue 过滤器filter的详解? 1.代码运的地 date | formatDate2.场景： 时间格式的转化注册过滤器函数先定义过滤器有两种式，第种是全局过滤器，我们可以直接在vue对象上使filter法注册过滤器，这种全局注册的过滤器在 任何个组件内都可以使。第种则是组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使，接下来我们使这两种式注册过滤器函数。/ 全局函数Vue.filter(formatTime,

27、 function (value) const date = new Date(val);const hour = date.getHours(); const minutes = date.getMinutes();const seconds = date.getSeconds(); return $hour : $minutes : $seconds;)4. 过滤器可以串联： message | filterA | filterB 5. 接收参数 message | filterA(arg1, arg2) filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第个

28、 参数，普通字符串 arg1 作为第个参数，表达式 arg2 的值作为第三个参数。26. v-for与v-if的优先级?永远不要把 v-if 和 v-for 同时在同个元素上。般我们在两种常见的情况下会倾向于这样做：为了过滤个列表中的项 (如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users替换为个计算属性(如 activeUsers)，让其返回过滤后的列表。为了避免渲染本应该被隐藏的列表 (如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动容器元

29、素上 (如 ul, ol)。27. static和assets的区别?assets和static两个都是于存放静态资源件。放在static中的件不会进构建编译处理，也就不会压缩体积，在打包时效率会更，但体积更在服务器中就会占据更的空间 放在assets中的件会进压缩体积、代码格式化，压缩后会放置在static中同上传服务器。因此建议样式件放在assets中进打包，引的第三件放到static中，因为引的件已经做过打包处理。28. vue常的指令v-if v-for v-html v-text29. vue常的修饰符lazy ：v-model 在每次 input 事件触发后将输框的值与数据进同步

30、。你可以添加 lazy 修饰符，从转变为使 change 事件进同步number 如果想动将户的输值转为数值类型，可以给 v-model 添加 number 修饰符trim 如果要动过滤户输的尾空字符，可以给 v-model 添加 trim 修饰符30. vue中数组变动更新检测？1. 变异法顾名思义，变异法会改变被这些法调的原始数组，它们也将会触发视图更新，这些法如下push()pop()shift() unshift() splice() sort() reverse()使举例：example1.items.push( message: Baz )2. 变异法变异法与变异法的区别就是，变异

31、法不会改变原始数组，总是返回个新数组，当使变异法时，可以新数组替换旧数组，变异法致有：filter(), concat() 和 slice()31. Vue.set法(视图更新)？32. vue定义指令详解？ 33.vue.js的两核？vue.js的两核：1. 数据驱动- 2.组件系统1. 数据驱动，也就是数据的双向绑定Vue 响应式核就是，getter 的时候会收集依赖，setter 的时候会触发依赖更新vue将遍历data中对象的所有property，并使 Object.defineProperty 把这些 property 全部转为 getter/setter。这些 getter/set

32、ter 对户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。每个组件实例都对应个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。getter 的时候我们会收集依赖，依赖收集就是订阅数据变化watcher的收集，依赖收集的的是当响应式数据发变化时，能够通知相应的订阅者去处理相关的逻辑。setter 的时候会触发依赖更新，之后当依赖项的 setter 触发时，会通知 watcher，从使它关联的组件重新渲染。2. 组件系统组件的核选项1 模板（template）：模板声明了数据和最终展现给户的DO

33、M之间的映射关系。2 初始数据（data）：个组件的初始数据状态。对于可复的组件来说，这通常是私有的状态。3 接受的外部参数(props)：组件之间通过参数来进数据的传递和共享。4 法（methods）：对数据的改动操作般都在组件的法内进。5 命周期钩函数（lifecycle hooks）：个组件会触发多个命周期钩函数，最新2.0版本对于命周期函数名称改动很。6 私有资源（assets）：Vue.js当中将户定义的指令、过滤器、组件等统称为资源。个组件可以声明的私有资源。私有资源只有该组件和它的组件可以调34. Jquery和vue对?vue适的场景：复杂数据操作的后台页，表单填写页jquer

34、y适的场景：如说些html5的动画页，些需要js来操作页样式的页然者也是可以结合起来起使的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加效率的完成业务需求35. vue组件引及使的种式？符号的使组件的放置位置36. vue-cli打包项后路径错误问题?、问题描述执 npm run build 命令后，打包成dist件夹，访问的时候报如下错误：、解决办法在根录下，新建 vue.config.js件，内容如下，module.exports = publicPath:./, configureWebpack: resolve: alias: assets: /assets, c

35、ommon: /common,components: /components, network: /network,views: /views, plugins: /plugins,37. 前端三框架的对?MVX框架模式：MVC+MVP+MVVM1. MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的的，让彼此的职责分开。View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。户User通过控制器Controller来操作模板Model从达到视图Vie

36、w的变化。2. MVP：是从MVC模式演变来的，都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显。在MVP中，Presenter完全把View和Model进了分离，主要的程序逻辑在Presenter实现。并且，Presenter和View是没有直接关联的，是通过定义好的接进交互，从使得在变更View的时候可以保持Presenter不变。MVP模式的框架：Riot,js。3. MVVM：MVVM是把MVC的Controller和MVP的Presenter改成了ViewModel。Model+View+ViewModel。View的变化会动更新到M

37、odel, Model的变化也会动同步到View上显。这种动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。Vue.js是什么？看到了上的框架模式介绍，我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢？ 其实Vue.js不是个框架，因为它只聚焦视图层，是个构建数据驱动的Web界的库。Vue.js通过简单的API（应程序编程接）提供效的数据绑定和灵活的组件系统。Vue.js的特性如下：轻量级的框架双向数据绑定指令插件化Vue.js与其他框架的区别？1. 与AngularJS的区别相同点：都持指令：内置指令和定义指令。都持过滤器：内置过滤器和定义

38、过滤器。都持双向数据绑定。都不持低端浏览器。不同点：1. AngularJS的学习成本，如增加了Dependency Injection特性，Vue.js本提供的API都较简单、直观。2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。Vue.js使基于依赖追踪的观察并且使异步队列更新。所有的数据都是独触发的。 对于庞的应来说，这个优化差异还是较明显的。2. 与React的区别相同点：React采特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊件格式，对件内容都有些约定，两者都需要编译后使。中思想相同：切都是组件，组件实例之间可以嵌套。都提供合理的钩

39、函数，可以让开发者定制化地去处理需求。都不内置列数AJAX，Route等功能到核包，是以插件的式加载。在组件开发中都持mixins的特性。不同点：React依赖Virtual DOM,Vue.js使的是DOM模板。React采的Virtual DOM会对渲染出来的结果做脏检查。Vue.js在模板中提供了指令，过滤器等，可以常便，快捷地操作DOM。38. 如何实现跨组件 v-model（双向数据绑定）？39. delete和Vue.delete删除数组的区别?40. SPA屏加载慢如何解决?1. 将公共的js库script引，让浏览器并下载资源2. 配置路由，组件，页。使懒加载，在调某个组件时在

40、下载某个js3. 加个屏的loading视图，可以提户体验41. vue-router与location.href的法区别？42. 详解Vue的slot新法？ 43.axios和ajax优缺点的理解？44. Vue封装组件的过程详解?45. vue 各种组件通信法（ 兄弟 爷孙 毫关系的组件）、组件通信props 和 $emit 组件通信组件有时需要与组件进沟通，沟通的式就是组件 emit 事件，组件通过监听这个事件来做进步动作。组件与组件通信则使 props假设这有个组件并引了个组件 my-comp：1 组件有系列 msg 数据需要通过组件渲染，将 msg 作为 prop 传递给组件即可：i

41、mport MyComp from /components/MyComp.vueexport default name: home, components: MyComp,data () return msgs: id: 1, data: hello js, id: 2, data: css world, id: 3, data: animated style我们通过点击组件每项触发个事件，组件监听这个事件去动态改变组件的 color 样式，这就是组件监听组件事件，事件处理函数可以从组件传递值给组件：先增加个事件 handle-change-color 当这个事件被触发时修改名为 color

42、的 data，然后将 colored 通过 props 传到组件： import MyComp from /components/MyComp.vueexport default name: home,components: / 注册组件MyComp,data () return colored: false, / 状态msgs: id: 1, data: hello js, id: 2, data: css world, id: 3, data: animated style,methods: handleChangeColor () this.colored = !this.colored / 监