Vue面试题供参考.docx
- 文档编号:17249517
- 上传时间:2023-07-23
- 格式:DOCX
- 页数:13
- 大小:28.95KB
Vue面试题供参考.docx
《Vue面试题供参考.docx》由会员分享,可在线阅读,更多相关《Vue面试题供参考.docx(13页珍藏版)》请在冰点文库上搜索。
Vue面试题供参考
Vue面试题(供参考)
1、active-c1ass是哪个组件的属性?
嵌套路由怎么定义?
答;vue-router模块的router-link组件。
亠
2、怎么定义vue—router的动态路由?
怎么获取传过来的动态参数?
答:
在router目录下的ind.ex0js文件中,对path属性加上/:
id。
使用:
router对象的params。
id.必
3、vue-router有哪几种导航钩子?
'答:
三种,一种是全局导航钩子;router.beforeEach(to,fron^next),作用:
跳转前进行判断拦截。
第二
种:
组件内的钩子:
第三种:
单独路宙独享组件a
4、sc$$是什么?
安装使用的步骤是?
有哪几大特性?
必答:
预处理css,把cs$当前函数编写,定艾变量,抿套。
先fecss—loader^node-loader、sass-loader等加载器模块,在webpack-baseoconfig,js配置文件中加多一个拓展:
extenstion,再加多一个模块:
module里面test、loader^
4。
1、scss是什么?
在vue。
c1i中的安装使用步骤是?
有哪几大特性?
介答:
css的预编译。
使用步骤:
第一步:
用npm下三个loader(sass—loadei\css—1oadec、nodesass)
第二步:
在build目录找至vzebpack。
base。
config。
js,在那个extend$属性中加一"卜拓展.$css
第三步:
还是在同一个文件,配置一个module属性
第四步:
然后在组件的style标签加上lang属性,例如:
1ang=!
ts
css'*
有哪几大特性:
1、可以用变量,例如缶变量名称二值》:
2、可以用混合器,例如()
3、可以嵌套a
5、mint-ui是什么?
怎么使用。
说出至少三个组件使用方法?
答:
基于vue的前端组件库。
npm安转,然后import样式和js,vue.use
Vue面试题(供参考)
(mintUi)全局引入。
在单个组件局部引入:
import{Toast}from'mint—Li「°组件一;Toast('登录成功'〉:
组件二:
mint-header;组件三:
mint-swIper
6、v-model是什么?
怎么使用?
vue中标签怎么绑定事件?
答;可以实现双向绑定,指令(f—class、v-for、v-if、v—$hew、v一on)。
vue的model层的data属性.绑定事件:
7、axios是什么?
怎么使用?
描述使用它实现登录功能的流程?
答:
请求后台资源的模块一npminstallaxios-S然后发送的是跨域,
需在配置文件中config/index,js进行设置。
后台如果是Tp5则定义一个资源路由。
js中使用import进来,然后。
get或。
post.返回在.then函数中如果成功,失败则是在.catch函数中
8、axios+tp5进阶中,调用axios.post('api/user>是进行的什么操作?
axios(>put(pi/user/8z)呢?
答:
跨域,添加用户操作,更新操作,
9、什么是RESTfulAPT?
怎么使用?
答:
是一个api的标准,无状态请求.请求的路由地址是固定的,如果是tp5则先路由配置中把资源路由配置好。
标確有:
.post.put。
delete
10、vuex是什么?
怎么使用?
哪种功能场景使用它?
答:
vue框架中状态管理。
在maIn.js引入store7注入新建了一个目录store,■■■o.export。
场景有:
单页应用中,组件之间的状态。
音乐播放、登录状态、加入购物车
11、mvvm框架是什么?
它和其它框架(jquery)的区别是什么?
哪些场景适合?
答:
一个model+vIew+viewHodel框架,数model,viewMode1连接两个
区别:
Ie数据驱动,通过数据来显示视图层而不是节点操作。
场景:
数据操作比较多的场景,更加便捷
12.自定义指令(V—check,v-focus)的方法有哪些?
它有哪些钩子函数?
还有哪些钩子函数参数?
答:
全局定义指令:
在vue对象的directive方法里面育两个参数,一个是指令名称,另外一个是函数。
组件内定义指令:
directives
钩子函数:
bind〈绑定事件触发〉、inser匚ed(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:
e1、binding
13.说岀至少4种vue当中的指令和它的用法?
答:
V—if:
判断是否隐藏;v-for:
数据循环出来;v—bind:
c1ass:
绑定一个属性;v-model:
实现双向绑定金
14.vue-router是什么?
它有哪些组件?
答:
vue用来写路由一个插件.route—link-,router—view
15.导航钩子有哪些?
它们有哪些参数?
答:
导航钩子有;aV全局钩子和组件内独卓的钩子。
b/beforeRou
teEnafterEnter、beforeRouterUpdate、beforeRouteLeave参数:
育to(去的那个路由〉、from(离开的路由)、next(一定要用这个函数才能去到下一个路由,如杲不用就拦截)晟常用就这几种
16.Vue的双向数据绑定原理是什么?
e.js是采用数据劫持结合发布者一订阅者模式的方式,通过Obje
ct,defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
Vue面试题(供参考)
具体步骤:
第一步:
需要observe的数据对彖进行递归遍历,包括子属性对象的属性,都加上setter•和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:
compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数摇的订阅者,一旦数据有变动,收到通知,更新视图
第三步:
Watch已r订阅者是0bserver和Comp订e之间通信的桥梁,主要做的事情是:
1、在目身实例化时往属性订阅器(dep)里面添加目己
2、自身必须有一个update()方法*3、待属性变动dep.notice(>
通知时,能调用自身的update0方法,并触发Compile中绑定的回询则功成身退。
第四步:
MVVM作为数据绑定的入口,整合Observer.Conpile和
Watcher三者,逋过Observer来监听自己的model数据变化,通过Compi1e来堀析编译模板指令,最终利用Watche【、搭起Observer•和Compile之]瓦的通信桥梁,达到数擔变化一〉视图更新;视图交互变化(input)->数据m
odel变更的双向绑定效果.
ps:
16题答案同样适合"vuedata是怎么实现的?
”此面试题.
17、请详细说下你对vue生命周期的理解?
答;总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前丿后:
在beforeCreated阶段,八e实例的挂载;元素$e1和数据对象da都为undefined,还未初始化。
在created阶段,vue实例的数据对象da.ta有了,$e1还没有。
载入前/后:
在beforeMount阶段,vue实例的$el和da匕a.都初始化了,但还是挂载之前为虚拟的dam节点,data.message还未替换。
在mounted阶段,vue实例挂载完成,data,message成功渲染.
更新前/后:
当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:
在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例己经解除了事件监听以及和doni的绑定,但是dom结构依然存在入
18、请说下封装vue组件的过程?
答:
首先,组件可以提升整个项目的开发效率。
能够把页面抽象成多个相对•独立
的模块,解决了我们传统项目开发:
效率低、难维护、复用性等问題。
然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。
子组件需要数裾,可以在props中接受定义•而子组件修改好数据后,想把数据传递给父组件.可以釆用emit方法。
“
19、你是怎么认识vuex的?
§:
vuek可以理解为一种开发模式或框架。
比如FHP有thinkphp,javaftspring等。
力通过状态(数据源)集中管理驱动组件的变化(好比spring的I0C容器对bean进行集中管理)。
应用级的状态集中放在store中:
改变状态的方式是提交mutations,这是个同步的事物;昇步逻辑应该封袋在action中。
20、vue-1oader是什么2使用它的用途有哪些2
答:
解析.vue文件的一个加载骼,跟template/js7styIe转换成js模块.
用途:
js可以写es6、style样武可以scss或1ess、template可以加jade等a
21、请说出vue。
cli项目中src目录每个文件夹和文件的用法?
assets文件夹是放静态资源:
components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件:
main,js是入口文件
22.vue.c1i中怎样使用自定义的组件?
有遇到过哪些问題吗?
苔:
第一步;在components目录新建你的组件文件(smIthButtonovu
e)9script一定要exportdefai)lt{
第二步:
在需要用的页面(组件)中导入:
importsmithButtonfrom
I・/componwrits/smithButtoncvue?
第三步:
注入到vue的子组件的components届性上面§components:
{smithButton}
第四步:
在template视图view中使用,
tton>A问题有:
smithButton命名,使用的时候则$mith-bLitton.
23、聊聊你对Vue.js的template编译的理解?
答:
简而言之,就是先转化成AST树,再得到的render函数返回VNode 详情步骤: 首先,逋过compi1e编译器把template编译成AST语法树(abstractsyntaxtree即源代码的抽象语法结构的树状表现形式〉,compile是cueateCompiIer的返回值,createCompiler是用以创建编译器的。 另外complie还负责合并option。 然后.AST会经过gener且te(将AS丁语法树转化成renderfuntion字符串的过程〉得到render函数: ,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等) 挑战一下: 1.vue响应式原理? a2、vue-route匸实现原理? 3、为什么要选vue? 与其它框架对比的优势和劣毎? 上4、vue如何实现父子组件通信,以及非父子组件通信? 5.vuejs与angularjs以及react的区别? 6.vuex是用来做什么的? a7、vue源码结构 1.vue中的MVVM模式 即Model—Vievz—V]ewModeL We是以数据为驱动的,Vue目身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。 VieyvModel是Vue的核心,它是Vue的一个实例。 Vue实例时作用域某个HTML元素上的,这个HTML.元素可以是body,也可以是某个id所指代的元素。 DOMListeners和DataBind1ngs是实现双向绑定的关键。 DOMListeners监听页面所有View层DOh[元素的变化,当发生变化,Mod边层的数据随之变化;DataBindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。 2ov-show指令,v—if的区别 条件渲染指令,与V—if不同的是,无论v-show的值为true或fa1se,元索都会存在于HTML代码中;而只有当if的值为true,元索■才会存在于HTML代码中.v-show指令只是设置了元素CSS的style值 3°如何让css只在当前组件中起作用 在每一个V□e组件中都可以定义各自的css? j£,如杲希望组件内写的css只对当前组件起作用,只需要在style中写入scoped,即: 4.指令keep—alive 在vue-router写着keep—alive,keep-alive的含义: 如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。 为此可以添加一个keep-a1ive指令 is='curremtView7keep-alive> 5。 Vuejs组件 vuejs构建组件使用 Vue面试题(供参考) Vue.componentCcomponentNamef7{/*conponent*/})-这里注意一点9组件要先注册再使用 Vue。 componentmine', template/#mineTp1 props: ['nameJ/titlex,'city,/content/ varH=newVue({ el: '#vuelnstance',data: { name: 'zhang' title: 'thisistitle", city: ? Beijing? ? content: 'thesearesomedescaboutB1og 6・路由嵌套 路由嵌套会将其他组件渲染到该组件内,而不杲进行整个页面跳转router-vie\v本身就是将组件漬染到该位置,想要进行页面跳转,就要将页面渲染到根组件,在起始配置路由时候写到: varApp=Vue,extend({root}): routerostart(Appu'祥aE); 这里首先将根组件注册进来,用于将路由中配置好的各个页面渲染出来,然后 8/13 将根组件挂载到与#app匹配的元素上. 7.指令v-el的使用 有时候我们想就像使用jauerr那样去访问一个元素*此时就可以使用v-J指令,去给这个元素注册一个索引,方便通过所属实例的访问这个元素0 注意 HTML不区分大小写,所以v-e1: $omeE1■将转换为全小写。 可以用彭一el: some—el然后设置thisoSelosomeE1。 示例 msg>hel1o other-msg>world(/span> thiSoSeis,msgotextContent//—>**hello" this.$e1s.otherMsg.textContent//—>,zworld八 thi$o$e1$.msg//->he1lo(/span> 8。 vuejs中使用事件名 在vuejs中,我们经常要绑定一些事件,有时候给DOM元素绑定,有时候给组件绑定。 绑定事件在HTML中用v-on: click—”event'*,这时evet的名字不要岀现大写,因为在1。 x中不区分大小写,所以如果我们在HTML写旷on: c11ck=pmyEvent*^而在js中写myEvent就出错误‘所以在vuejs的1.x绑定事件时候,要尽量避免使用大写字母。 在2.0中没有该限制! 9.Vue.js是什么 Vue.js(是一套构建用户界面的渐进式框架•与其他重量级框架不同的是,Vue采用自底向上増量开发的设计。 Vue的核心库只关注视图层,并且非 Vue面试题(供参考) 常容易学习,非常容易与其它库或己有项目整合•另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 10.VueJS特性: I: MWM模式〔数据变1: (model)发生改变视S(y1ew)也改变,视图(view)改变,数拆变量(mode1)也发生改变) 使用MVVM模式有几大好处: 1.低耦View可以独立于Model变化和修改,一个ViewMode1可以绑定到不同的View上,当View变化的时候Mode1可以环变,当M□del变化的时候View也可以不变。 2。 可重用性.可以把一些视图的逻辑放在VIewMode1里面,辻很多Vi御重用这段视图逻辑。 3。 独立开发。 开发人员可以专注与业务逻辑和数据的开发(ViewModel)。 设计人员口「以专注于界面(View)的设计。 4.可测试性。 可以针对\厂iewModel来对界面〈View)进行测试 II: 组件化 III指令系统 IIII: vue2o0开始支持虚拟dom vuelo0是操作的是真的dom元素而不是虚拟的 虚拟dom: 可以提升页面的刷新速度 虚拟D0M有利也有弊。 A: 大小-其中之一就是更多的功能意味着代码包中更多行的代码。 幸运的 是,Vue.js2.0依旧比较小(当前版本21。 4kb),并 且也正在删除很多东西。 B: 内存-同样,虚拟DOM需要将现有的DCH[拷贝后保存在内存中,这是一个在DOM更新速度和内存使用中的权衡。 C: 并不适用所有情况-如果虚拟DOM可以一次性进行批量的修改是非常好的。 但是如果是单独的、稀少的更新呢? 这样的任何 DOM更新都将会使虚拟DOh[带来无意义的预计算 HoVue„js特点 简洁: 页面由HT模板+Json数据+Vue实例组成 数据驱动: 自动计算属性和追踪依赖的模板表达式 组件化: 用可复用、解耦的组件来构造页面 轻量: 代码量小,不依赖其他晖 快速: 精确有效批量D0M更新 模板友好: 可通过npm,bower等多种方式安装,很容易融入 12.Vue.js和Angu1arJS之间的区别是什么? 下面是一些选择Vue而不是Angular的可能原因; Vue.js是一个更加灵活开放的解决方案•它允许你以希望的方式组织你的应用程序,而不是任何时候都必须遵循Angular制定的规则。 它仅仅是一个视图层,所以你可以将它抿入一个现有页面而不一定要做成一个庞大的单页应用。 在结合其他痒方面它给了你更大的的空间,但相应,你也需要做更多的架构决策。 例如,Yue。 js核心默认不包含路由和ajax功能,并且通常假定你在用应用中使用了一个外部的模块构建系统•这可能是最重要的区别在API和内部设计方面,Vue°jsfcAngular简单得多,因此你可以快速地学握它的全部特性并投入开发。 Vue。 js拥有更好的性能,因为它不使用脏检查。 当watcher越来越多时,Angular会变得越来越慢,因为作用域內的每一次数据变更,所有的watcher都需要被重新求值.Vue则根本没有这个问题,因为它釆用的是基于依赖追蹋的观察系统,所以所有的数据变更触发都是独立的,除非它们之间有明确的依赖关系。 Vue.js中指令和组件的槻念区分得更为清晰。 指令只负责封装DOM操作,而组件代表一个自给自足的独立单元一一它拥有自己的视图和数据逻辑。 在Angular中它们两看间有不少概念上的混淆。 13OVue.js和React.js有什么区别? Reactojs和Vue.js确实有一些相彳以——它们都提供数据驱动、可组合搭建的视图组件•然而,它们的内部实现是完全不同的。 React是基于VirtualDOM——一种在内存中描述D0M树状态的数据结构。 React中的数齬通常被看作是不可变的,而D0M操作则是通过VirtualDOM的diff来计算的。 与之相比,Vue.js中的数据默认是可变的,而数据的变更会直接出发对应的D0M更新。 相比于VirtualDOM,Vue.j$使用实际的DOM作为模板,并且保持对真实节点的引用来进行数据绑定。 VirtualDOM提供了一个函数式的描述视图的方法,这很cool。 因为它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图通与数据的同步。 它也开辟了JavaScript同构应用的可能性。 实话实说,我自己对React的设计理念也是十分欣赏的•但React有一个问题就是组件的逻辑和视图结合得非常紧密。 对于部分开发者来说,他们可能觉得这是个优点,但对那些像我一样兼顾设计和开发的人来说,还是更偏好模板,因为模板能让我们更好地在视觉上恩考设计和CSS.JSX和JavaScrIpt逻辑的混合干扰了我将代码映射到没计的思维过桂。 相反,Vue。 js通过在模板中加入一个轻量级的DSL(指令索统〉,换来一个依旧直观的模板,且能够将逻辑封装进指令和过滤器中。 React的另一个问题是: 由于DOM更新完全交由VirtualDOM管理,当你直的想要自己控制DOM是就有点棘手了(虽然理论上你可以,但这样做时你本质上在对抗Rea
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Vue 试题 参考