最全前端⾯试题
Vue⾯试题
⽣命周期函数⾯试题
1.什么是 vue ⽣命周期
Vue 实例从创建到销毁的过程,就是⽣命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等⼀系列的过程,我们称这是 Vue 的⽣命周期。
2.vue⽣命周期的作⽤是什么
Vue 所有的功能的实现都是围绕其⽣命周期进⾏的,在⽣命周期的不同阶段调⽤对应的钩⼦函数可以实现组件数据管理和DOM渲染两⼤重要功能。
⽣命周期中有多个事件钩⼦,在控制整个vue实例的过程时更容易形成好的逻辑。
3.第⼀次页⾯加载会触发哪⼏个钩⼦
beforeCreate , created , beforeMount ,mounted 这⼏个钩⼦
4.简述每个周期具体适合哪些场景
beforeCreate:创建前,此阶段为实例初始化之后,this指向创建的实例,此时的数据观察事件机制都未形成,不能获得DOM节点。
data,computed,watch,methods 上的⽅法和数据均不能访问。
可以在这加个loading事件。
created:创建后,此阶段为实例已经创建,完成数据(data、props、computed)的初始化导⼊依赖项。
可访问 data computed watch methods 上的⽅法和数据。
初始化完成时的事件写在这⾥,异步请求也适宜在这⾥调⽤(请求不宜过多,避免⽩屏时间太长)。
可以在这⾥结束loading事件,还做⼀些初始化,实现函数⾃执⾏。
未挂载DOM,若在此阶段进⾏DOM操作⼀定要放在Tick()的回调函数中。
beforeMount:挂载前,虽然得不到具体的DOM元素,但vue挂载的根节点已经创建,下⾯vue对DOM
的操作将围绕这个根元素继续进⾏。
beforeMount这个阶段是过渡性的,⼀般⼀个项⽬只能⽤到⼀两次。
mounted:挂载,完成创建vm.$el,和双向绑定
完成挂载DOM和渲染,可在mounted钩⼦函数中对挂载的DOM进⾏操作。
可在这发起后端请求,拿回数据,配合路由钩⼦做⼀些事情。
beforeUpdate:数据更新前,数据驱动DOM。
在数据更新后虽然没有⽴即更新数据,但是DOM中的数据会改变,这是vue双向数据绑定的作⽤。
可在更新前访问现有的DOM,如⼿动移出添加的事件。
updated:数据更新后,完成虚拟DOM的重新渲染和打补丁。
组件DOM已完成更新,可执⾏依赖的DOM操作。
注意:不要在此函数中操作数据(修改属性),会陷⼊死循环。
activated:在使⽤vue-router时有时需要使⽤<keep-alive></keep-alive>来缓存组件状态,这个时候created钩⼦就不会被重复调⽤了。
如果我们的⼦组件需要在每次加载的时候进⾏某些操作,可以使⽤activated钩⼦触发。
deactivated:<keep-alive></keep-alive>组件被移除时使⽤。
beforeDestroy:销毁前,
可做⼀些删除提⽰,如:您确定删除xx吗?
destroyed:销毁后,当前组件已被删除,销毁监听事件,组件、事件、⼦实例也被销毁。
这时组件已经没有了,⽆法操作⾥⾯的任何东西了
created:在模板渲染成html前调⽤,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调⽤,通常是初始化页⾯完成后,再对html的dom节点进⾏⼀些需要的操作。
6.vue获取数据在哪个周期函数
⼀般 created/beforeMount/mounted 皆可.
⽐如如果你要操作 DOM , 那肯定 mounted 时候才能操作.
7.请详细说下你对vue⽣命周期的理解?
总共分为8个阶段创建前/后,载⼊前/后,更新前/后,销毁前/后。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素el和∗∗数据对象∗∗data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el和∗∗数据对象∗∗data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el还没有。
载⼊前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,ssage还未替换。在mounted阶段,vue实例挂载完成,ssage成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated⽅法。
销毁前/后:在执⾏destroy⽅法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。
vue路由⾯试题
1.mvvm 框架是什么?
2.vue-router 是什么?它有哪些组件
3.active-class 是哪个组件的属性?
4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
5.vue-router 有哪⼏种导航钩⼦?
7.vue-router响应路由参数的变化
8.vue-router传参
9.vue-router的两种模式
10.vue-router实现路由懒加载( 动态加载路由 )
vue常见⾯试题
1.vue优点
2.vue⽗组件向⼦组件传递数据?
3.⼦组件像⽗组件传递事件
前端ui框架是什么意思4.v-show和v-if指令的共同点和不同点
5.如何让CSS只在当前组件中起作⽤
6.的作⽤是什么?
7.如何获取dom
8.说出⼏种vue当中的指令和它的⽤法?
9.vue-loader是什么?使⽤它的⽤途有哪些?
10.为什么使⽤key
11.axios及安装
12.axios解决跨域
13.v-modal的使⽤
14.scss的安装以及使⽤
15.请说出vue.cli项⽬中src⽬录每个⽂件夹和⽂件的⽤法?
16.分别简述computed和watch的使⽤场景
17.v-on可以监听多个⽅法吗
18.$nextTick的使⽤
19.vue组件中data为什么必须是⼀个函数
20.vue事件对象的使⽤
21 组件间的通信
22.渐进式框架的理解
23.Vue中双向数据绑定是如何实现的
24.单页⾯应⽤和多页⾯应⽤区别及优缺点
25.vue中过滤器有什么作⽤及详解
26.v-if和v-for的优先级
27.assets和static的区别
28.列举常⽤的指令
29.vue常⽤的修饰符
30.数组更新检测
31.Vue.set视图更新
32.⾃定义指令详解
33.vue的两个核⼼点
34.vue和jQuery的区别
35 引进组件的步骤
36.Vue-cli打包命令是什么?打包后悔导致路径问题,应该在哪⾥修改
37.三⼤框架的对⽐
38.跨组件双向数据绑定
39.delete和Vue.delete删除数组的区别
40.SPA⾸屏加载慢如何解决
41.Vue-router跳转和location.href有什么区别
42.vue slot
43.你们vue项⽬是打包了⼀个js⽂件,⼀个css⽂件,还是有多个⽂件?
44.vue遇到的坑,如何解决的?
45.Vue⾥⾯router-link在电脑上有⽤,在安卓上没反应怎么解决?
46.Vue2中注册在router-link上事件⽆效解决⽅法
47.RouterLink在IE和Firefox中不起作⽤(路由不跳转)的问题
48.axios的特点有哪些
49.请说下封装 vue 组件的过程?
50.vue 各种组件通信⽅法(⽗⼦ ⼦⽗ 兄弟 爷孙 毫⽆关系的组件)
51.params和query的区别
52.vue mock数据
53 vue封装通⽤组件
54.vue初始化页⾯闪动问题
55.vue禁⽌弹窗后的屏幕滚动
56.vue更新数组时触发视图更新的⽅法
57.vue常⽤的UI组件库
58.vue如何引进本地背景图⽚
59.vue如何引进sass
60.vue修改打包后静态资源路径的修改
vuex常见⾯试题
1.vuex是什么?怎么使⽤?哪种功能场景使⽤它?
2.vuex有哪⼏种属性
3.不使⽤Vuex会带来什么问题
4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
5.vuex⼀个例⼦⽅法
6.Vuex中如何异步修改状态
7.Vuex中actions和mutations的区别
vue项⽬实战
1.顶部悬停效果
2.电话本列表效果( 右边字母分类 上下滑动 旁边字母显⽰⾼亮)
3.vue做代理
4.Vue路由切换时的左滑和右滑效果⽰例
ES6⾯试题
ES6新增⽅法⾯试题
1.let const var⽐较
2.反引号(`)标识
3.函数默认参数
4.箭头函数
5.属性简写
6.⽅法简写
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论