vue系列面试题收录
文章平均质量分 86
故心v
越努力越幸运
展开
-
面试官:SPA(单页应用)首屏加载速度慢怎么解决?
故心故心故心故心小故冲啊文章目录一、什么是首屏加载二、加载慢的原因三、解决方案小结:参考文献一、什么是首屏加载首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节关于计算首屏时间利用performance.timing提供的数据:通过DOMContentLoad或者performance来计算出首屏时间// 方案一:转载 2021-01-19 09:28:39 · 1162 阅读 · 0 评论 -
面试官:说说对observable的理解
故心故心故心故心小故冲啊文章目录一、Observable 是什么二、使用场景三、原理分析参考文献一、Observable 是什么Observable 翻译过来我们可以理解成可观察的我们先来看一下其在Vue中的定义Vue.observable,让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器Vue.observable({ count : 1})转载 2021-01-19 09:20:16 · 826 阅读 · 0 评论 -
面试官:说说你对Vue生命周期的理解?
系列文章目录故心故心故心故心小故冲啊文章目录系列文章目录一、生命周期是什么二、生命周期有哪些三、生命周期整体流程四、题外话:数据请求在created和mouted的区别参考文献一、生命周期是什么生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲转载 2021-01-18 13:11:55 · 308 阅读 · 0 评论 -
面试官:为什么data属性是一个函数而不是一个对象?
文章目录一、实例和组件定义data的区别二、组件data定义函数与对象的区别三、原理分析四、总结一、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象,也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" ..转载 2021-01-17 21:21:55 · 852 阅读 · 0 评论 -
面试官:什么是虚拟DOM?如何实现一个虚拟DOM?
故心故心故心故心小故冲啊文章目录一、什么是虚拟DOM二、为什么需要虚拟DOM三、如何实现虚拟DOM小结参考文献一、什么是虚拟DOM虚拟 DOM (Virtual DOM )这个概念相信大家都不陌生,从 React 到 Vue ,虚拟 DOM 为这两个框架都带来了跨平台的能力(React-Native 和 Weex)实际上它只是一层对真实DOM的抽象,以JavaScript 对象 (VNode 节点) 作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上在Ja转载 2021-01-17 21:07:36 · 3241 阅读 · 1 评论 -
面试官:Vue常用的修饰符有哪些?有什么应用场景?
故心故心故心故心小故冲啊文章目录一、修饰符是什么二、修饰符的作用表单修饰符事件修饰符鼠标按钮修饰符键盘修饰符v-bind修饰符三、应用场景参考文献一、修饰符是什么在程序世界里,修饰符是用于限定类型以及类型成员的声明的一种符号在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理vue中修饰符分为以下五种:表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符二、修饰符的作用表单修饰符在.转载 2021-01-17 10:24:47 · 1323 阅读 · 0 评论 -
面试官:说说为什么要在列表组件中写 key,其作用是什么?
故心故心故心故心小故冲啊文章目录一、Key是什么二、设置key与不设置key区别三、原理分析参考文献一、Key是什么开始之前,我们先还原两个实际工作场景1.当我们在使用v-for时,需要给单元加上key<ul> <li v-for="item in items" :key="item.id">...</li></ul>2.用+new Date()生成的时间戳作为key,手动强制触发重新渲染<Comp :key="+n.转载 2021-01-17 10:06:48 · 1046 阅读 · 1 评论 -
面试官:说说你对keep-alive的理解是什么?怎么缓存当前的组件?缓存后怎么更新?
故心故心故心故心小故冲啊文章目录一、Keep-alive 是什么二、使用场景三、原理分析一、Keep-alive 是什么keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOMkeep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们keep-alive可以设置以下props属性:include - 字符串或正则表达式。只有名称匹配的组件会被缓存exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存max.转载 2021-01-17 09:51:55 · 3259 阅读 · 5 评论 -
面试官:了解过vue中的diff算法吗?说说看
故心故心故心故心小故冲啊文章目录一、是什么二、比较方式三、原理分析小结参考文献一、是什么diff 算法是一种通过同层的树节点进行比较的高效算法其有两个特点:比较只会在同层级进行, 不会跨层级比较在diff比较的过程中,循环从两边向中间比较diff 算法的在很多场景下都有应用,在 vue 中,作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较二、比较方式diff整体策略为:深度优先,同层比较1.比较只会在同层级进行, 不会跨层级比较2.比较的过程中,循环从转载 2021-01-16 14:04:56 · 964 阅读 · 0 评论 -
面试官:Vue项目中有封装过axios吗?怎么封装的?
故心故心故心故心小故冲啊文章目录一、axios是什么基本使用二、为什么要封装三、如何封装设置接口请求前缀在本地调试的时候,还需要在vue.config.js文件中配置devServer实现代理转发,从而实现跨域设置请求头与超时时间封装请求方法请求拦截器响应拦截器参考文献一、axios是什么axios 是一个轻量的 HTTP客户端基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取转载 2021-01-16 13:48:11 · 2944 阅读 · 1 评论 -
面试官:Vue实例挂载的过程中发生了什么?
<font color=#999AAA 故心故心故心故心小故冲啊文章目录一、思考二、分析三、结论参考文献一、思考我们都听过知其然知其所以然这句话那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么?过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等二、分析首先找到vue的构造函数源码位置:src\core\instance\index.jsfunction Vue (options) { if (process.env.NODE_ENV !== 'p转载 2021-01-14 17:05:11 · 1442 阅读 · 1 评论 -
面试官:为什么Vue中的v-if和v-for不建议一起用?
故心故心故心故心小故冲啊文章目录一、作用二、优先级三、注意事项参考文献一、作用v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化两者在用法转载 2021-01-13 11:15:18 · 1006 阅读 · 0 评论 -
面试官:Vue中的$nextTick怎么理解?
故心故心故心故心小故冲啊文章目录一、NextTick是什么为什么要有nexttick二、使用场景三、实现原理小结:参考文献一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM就是可以立即获取dom更新后的数据进行更新举例一下Html结构<div id="app"> {{ message }} </div>构建一个vue实例const vm = new Vue({.转载 2021-01-13 11:05:26 · 1597 阅读 · 1 评论 -
2021vue面试题总结
故心故心故心故心小故冲啊文章目录1.说说你对vue的理解?2.说说你对双向绑定的理解?3.Vue中的v-show和v-if怎么理解?4.Vue组件间通信方式都有哪些?正在收录中....1.说说你对vue的理解?vue是一个用于构建用户界面的开源渐进式框架,也是一个创建单应用页面的Web应用框架.Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互vue有俩大核心特性1.数据驱动(MVVM)MVVM表示的是 Model-V.原创 2021-01-11 12:00:06 · 7162 阅读 · 0 评论 -
面试官:说说你对双向绑定的理解?
故心故心故心故心小故冲啊文章目录一、什么是双向绑定二、双向绑定的原理是什么三、实现双向绑定实现编译Compile依赖收集实现思路参考文献一、什么是双向绑定我们先从单向绑定切入单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定举个栗子当用户填写表单时,View的状态就被更新了,如果此时可以自动更新M.转载 2021-01-11 11:41:56 · 2771 阅读 · 0 评论 -
面试官:说说你对vue的理解?
故心故心故心故心小故冲啊文章目录前言一、vue是什么二、Vue核心特性数据驱动(MVVM)组件化指令系统三、Vue和React对比参考文献前言一、vue是什么Vue.js(/vjuː/,或简称为Vue)是一个用于构建用户界面的开源渐进式框架,也是一个创建单页应用的Web应用框架。2016年一项针对JavaScript的调查表明,Vue有着89%的开发者满意度。在GitHub上,该项目平均每天能收获95颗星,为Github有史以来星标数第3多的项目同时也是一款流行的JavaScript前端框转载 2021-01-11 11:18:00 · 1846 阅读 · 0 评论 -
面试官:Vue组件间通信方式都有哪些?
故心故心故心故心小故冲啊文章目录一、组件间通信的概念二、组件间通信解决了什么三、组件间通信的分类四、组件间通信的方案1.props传递数据2.$emit 触发自定义事件3.ref4.EventBus5.parent或root6.attrs 与 listeners7.provide 与 inject8.vuex小结参考文献一、组件间通信的概念开始之前,我们把组件间通信这个词进行拆分组件通信都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组件通信指的是发送转载 2021-01-10 10:23:46 · 499 阅读 · 0 评论 -
面试官:Vue中的v-show和v-if怎么理解?
故心故心故心故心小故冲啊文章目录一、v-show与v-if的共同点二、v-show与v-if的区别三、v-show与v-if原理分析v-show原理v-if原理四、v-show与v-if的使用场景五、参考文献一、v-show与v-if的共同点我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else),都能控制元素在页面是否显示在用法上也是相同的<Model v-show="isShow" /><Model v-if="isShow" /转载 2021-01-09 11:32:32 · 1118 阅读 · 0 评论