重整旗鼓,2019自结前端面试小册【Vue.Js】
2020/2/25 11:15:25
本文主要是介绍重整旗鼓,2019自结前端面试小册【Vue.Js】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
临近2019年的尾声,是不是该为了更好的2020年再战一回呢? ‘胜败兵家事不期,包羞忍耻是男儿。江东子弟多才俊,卷土重来未可知’,那些在秋招失利的人,难道就心甘情愿放弃吗!
此文总结2019年以来本人经历以及浏览文章中,较热门的一些面试题,涵盖从CSS到JS再到Vue再到网络等前端基础到进阶的一些知识。
总结面试题涉及的知识点是对自己的一个提升,也希望可以帮助到同学们,在2020年会有一个更好的竞争能力。
css篇
- juejin.im/post/5e040e…Javavscript篇
- juejin.im/post/5e2122…ECMAScript 6篇
- juejin.im/post/5e2962…
Module Four - Vue
「About Base」
讲一讲你对MVVM的理解?与MVC有什么不同?
MVC
指的是Model-View-Controller
,即模型-视图-控制器。- 使用
MVC
的目的就是将模型与视图分离 MVC
属于单向通信,必须通过Controller
来承上启下,既必须由控制器来获取数据,将结果返回给前端,页面重新渲染
- 使用
MVVM
指的是Model-View-ViewModel
,即模型-视图-视图模型,「模型」指的是后端传递的数据,「视图」指的是所看到的页面,「视图模型」是MVVM
的核心,它是连接View
与Model
的桥梁,实现view
的变化会自动更新到viewModel
中,viewModel
中的变化也会自动显示在view
上,是一种数据驱动视图的模型
区别:
MVC
中的Control
在MVVM
中演变成viewModel
MVVM
通过数据来显示视图,而不是通过节点操作MVVM
主要解决了MVC
中大量的DOM
操作,使页面渲染性能降低,加载速度慢,影响用户体验的问题
请说一下Vue响应式数据的原理?
Vue
底层对于响应式数据的核心是object.defineProperty
,Vue
在初始化数据时,会给data
中的属性使用object.defineProperty
重新定义属性(劫持属性的getter
和setter
),当页面使用对应属性时,会进行依赖收集(收集当前组件的watcher
),如果属性发生变化,会通知相关依赖进行更新操作
- 总结:
Vue
通过数据劫持配合发布者-订阅者的设计模式,内部通过调用object.defineProperty()
来劫持各个属性的getter
和setter
,在数据变化的时候通知订阅者,并触发相应的回调
讲一讲Vue是如何检测数组的变化?
- 核心思想:使用了函数劫持的方式,重写了数组的方法(
push,pop,unshift,shift···
) Vue
将data
中的数组,进行了原型链的重写,指向了自己所定义的数组原型方法,当调用数组的API
时,可以通知依赖更新,如果数组中包含着引用类型,会对数组中的引用类型再次进行监控
为什么Vue要采取异步渲染?
因为如果不采用异步渲染,那么每次更新数据都会进行重新渲染,为了提高性能,Vue
通过异步渲染的方式,在本轮数据更新后,再去异步更新视图
「译」Object.defineProperty有什么缺点?(为什么Vue3.0开始使用Proxy实现响应式)
Object.defineProperty
只能劫持对象的属性,因此需要遍历对象的每个属性,而Proxy
可以直接代理对象Object.defineProperty
对新增属性需要手动进行观察,由于Object.defineProperty
劫持的是对象的属性(第一点),所以新增属性时,需要重新遍历对象,对其新增属性再使用Object.defineProperty
进行劫持 (正是这个原因导致我们在给data
中的数组或对象新增属性时,需要使用$set
才能保证视图可以更新)Proxy
性能高,支持13种拦截方式
nextTick实现原理是什么? 在Vue中有什么作用
- 原理:
EventLoop
事件循环 - 作用:在下次
dom
更新循环结束后执行延迟回调,当我们修改数据之后立即使用nextTick()
来获取最新更新的Dom
watch中的deep:true是如何实现的?
当用户指定了watch
中的deep:true
时,如果当前监控的值是数组类型(对象类型),会对对象中的每一项进行求值,此时会将当前watcher
存入到对应属性的依赖中,这样数组中的对象发生变化也会通知数据进行更新
缺点:由于需要对每一项都进行操作,性能会降低,不建议多次使用deep:true
为什么v-if与v-for不建议连在一起使用?
v-if
优先级高于v-for
,如果连在一起使用的话会把v-if
给每一个元素都添加上,重复运行于每一个v-for
循环中,会造成性能浪费
「译」组件的data为什么要写成函数形式
在Vue
中,组件都是可复用的,一个组件创建好后,可以在多个地方重复使用,而不管复用多少次,组件内的data
都必须是相互隔离,互不影响的,如果data
以对象的形式存在,由于Javascript
中对象是引用类型,作用域没有隔离,因此data
必须以函数的形式返回
- 总结:为了实现每个组件实例可以维护独立的数据拷贝,不会相互影响
❗ 小知识: new Vue
根组件不需要复用,因此不需要以函数方式返回
「译」v-for中的key的作用是什么?
key
是为每个vnode
指定唯一的id
,在同级vnode
的Diff
过程中,可以根据key
快速的进行对比,来判断是否为相同节点,并利用key
的唯一性生成map
来更快的获取相应的节点,另外指定key
后,可以保证渲染的准确性
Vue每个生命周期什么时候被调用?
beforeCreate
→ 在实例初始化之后,数据观测(data observer
)之前被调用created
→ 实例已经创建完成之后被调用。在这里,实例已完成以下配置:- 数据观测(
data observer
) - 属性和方法的运算
watch/event
事件回调- 但这里还没有
$el
- 数据观测(
beforeMount
→ 在挂载开始之前被调用,相关的render
函数首次被调用mounted
→$el
被新创建的vm.$el
替换,并挂载到实例上之后调用该钩子beforeUpdate
→ 数据更新时调用,发生在虚拟DOM
重新渲染和打补丁之前updated
→ 由于数据更改导致的虚拟DOM
重新渲染和打补丁,在这之后会调用该钩子(该钩子在服务器端渲染期间不被调用)beforeDestroy
→ 实例销毁之前调用,在这里,实例仍然完全可以使用destroyed
→Vue
实例销毁后调用。调用该钩子后,Vue
实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁(该钩子在服务器端渲染期间不被调用)
Vue每个生命周期内部可以做什么事?
created
→ 实例已经创建完成,由于它是最早触发的,所以可以进行一些数据,资源的请求mounted
→ 实例已经挂载完成,可以进行一些DOM
操作beforeUpdate
→ 可以在该钩子中进一步地更改状态,这不会触发附加的渲染过程updated
→ 可以执行依赖于DOM
的操作。但在大多数情况下,应避免在该钩子中更改状态,因为这可能导致更新无限循环destroyed
→ 可以执行一些优化操作,例如清空定时器,清理缓存,解除事件绑定等
Vue组件有哪些声明生命周期钩子?
「beforeCreate
」、「created
」、「beforeMount
」、「mounted
」、「beforeUpdate
」、「updated
」、「beforeDestroy
」、「destroyed
」
❗ 小知识:
<keep-alive>
拥有自己独立的钩子函数 activated
| deactivated
activated
→ 在被<keep-alive>
包裹的组件中才有效,当组件被激活时使用该钩子deactivated
→ 在被<keep-alive>
包裹的组件中才有效,当组件被停止时使用该钩子
「译」Vue的父组件和子组件生命周期钩子执行顺序是什么?
- 理解渲染过程:
父组件挂载完成必须是等到子组件都挂载完成之后,才算父组件挂载完,所以父组件的
mounted
肯定是在子组件mounted
之后
So:「父」beforeCreate → 「父」created → 「父」beforeMount → 「子」beforeCreate → 「子」created → 「子」beforeMount → 「子」mounted → 「父」mounted
-
子组件更新过程(取决于对父组件是否有影响)
- 影响到父组件: 「父」beforeUpdate → 「子」beforeUpdate → 「子」updated → 「父」updated
- 不影响父组件: 「子」beforeUpdate → 「子」updated
-
父组件更新过程(取决于对子组件是否有影响)
- 影响到子组件: 「父」beforeUpdate → 「子」beforeUpdate → 「子」updated → 「父」updated
- 不影响子组件: 「父」beforeUpdate → 「父」updated
-
销毁过程
- 「父」beforeDestroy → 「子」beforeDestroy → 「子」destroyed → 「父」destroyed
怎么理解vue的单向数据流
- 在
vue
中,父组件可以通过prop
将数据传递给子组件,但这个prop
只能由父组件来修改,子组件修改的话会抛出错误 - 如果是子组件想要修改数据,只能通过
$emit
由子组件派发事件,并由父组件接收事件进行修改
为什么子组件不可以修改父组件传递的Prop?(为什么vue提倡单向数据流)
由于vue
提倡单向数据流,即父级props
的更新会流向子组件,但反过来则不行。这是为了防止意外的改变父组件的状态,使得应用的数据流变得难以理解。如果破坏了单项数据流,当应用复杂时,debug的成本将会非常高
组件间有哪些通信方式?
-
父子组件通信
props
/event
$parent
/$children
ref
provide
/inject
.sync
-
非父子组件通信
eventBus
- 通过根实例
$root
vuex
$attr
/$listeners
provide
/inject
❗ 小知识: 关于.sync
的使用
假设有一个组件 comp <comp :foo.sync="bar"></comp> 传递foo值并用sync修饰,会被扩展成 <comp :foo="bar" @update:foo="val => bar = val"></comp> 复制代码
当子组件comp需要更新foo的值时,它需要显示地触发一个更新事件 this.$emit('update:foo', newValue) 复制代码
说一说vue的动态组件
多个组件通过同一个挂载点进行组件的切换,
is
的值是哪个组件的名称,那么页面就会显示哪个组件
<div :is='xxx'></div> 复制代码
讲一讲递归组件的用法
组件是可以在它们自己的模板中调用自身的,不过它们只能通过
name
选项来做这件事
首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会导致组件无限循环使用,最终出现
max stack size exceeded
的错误,也就是栈溢出。所以,我们应该使用v-if = 'false'
来作为递归组件的结束条件,当遇到v-if = 'false'
时,组件将不会再进行渲染
自定义组件的语法糖v-model是怎么样实现的?(v-model如何实现双向绑定)
v-model
本质是v-bind
和v-on
的语法糖,用来在表单控件或组件上创建双向绑定。
<input v-model='searchText'> 等价于 <input v-bind:value='searchText' v-on:input='searchText = $event.target.value'> 复制代码
在一个组件上使用v-model
,默认会为组件绑定名为value
的prop
和名为input
的事件
「译」Vuex和单纯的全局对象有什么区别?
vuex
和全局对象主要有两大区别:
vuex
的状态存储是响应式的。当vue
组件从store
中读取状态时,若store
中的状态发生变化,那么相应的组件也会得到高效更新- 不呢能直接改变
store
中的状态,改变store
中的状态唯一方法是显示地提交mutation
(commit
)。这样使得我们可以方便地跟踪每一个状态的变化
「译」为什么vuex的mutation中不能做异步操作?
vuex
中所有的状态更新的唯一方式都是提交mutation
,异步操作需要通过action
来提交mutation
(dispatch
)。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地使用vuex
每个mutation
执行完后都会对应得到一个新的状态变更,这样devtools
就可以打个快照存下来,然后就可以实现time-travel
了。
如果mutation
支持异步操作,就没有办法知道状态是何时更新,无法很好的进行状态追踪,影响调试效率
v-show / v-if 的区别是什么?
v-if
指如果条件不成立则不会渲染当前指令所在节点的Dom
元素,会在切换过程中对条件块的事件监听器和子组件进行销毁和重建v-show
只是基于css
进行切换,不管条件是什么,都会进行渲染(切换display:block | none
)
So:v-if
切换的开销较大,而v-show
初始化的开销较大,所以在需要频繁切换显示和隐藏的Dom
元素时,使用v-show
更合适,渲染后很少进行切换则使用v-if
较合适
computed / watch 的区别是什么?
computed
是依赖于其他属性的一个计算值,并且具备缓存,只有当依赖的值发生变化才会更新(自动监听依赖值的变化,从而动态返回内容)watch
是在监听的属性发生变化的时候,触发一个回调,在回调中执行一些逻辑
So:computed
和watch
区别在于用法上的不同,computed
适合在模板渲染中,如果是需要通过依赖来获取动态值,就可以使用计算属性。而如果是想在监听值变化时执行业务逻辑,就使用watch
computed / methods 的区别是什么?
computed
是基于它们响应式依赖进行缓存,只有在依赖值发生变化,才会进行计算求值methods
每次使用都会执行相应的方法
Vue中 v-html 有什么作用?会导致什么问题?
v-html
可以用来识别HTML标签并渲染出去
导致问题: 在网站上动态渲染任意Html
,很容易导致受到Xss
攻击,所以只能在可信内容上使用v-html
,且永远不能用于用户提交的内容上
keep-alive在vue中的作用是什么?
包裹在<keep-alive>
里组件,在切换时会保存其组件的状态,使其不被销毁,防止多次渲染,
· keep-alive
拥有两个独立的生命周期(activated
| deactivated
),使keep-alive
包裹的组件在切换时不被销毁,而是缓存到内存中并执行deactivated
钩子,切换回组件时会获取内存,渲染后执行activated
钩子
如何新增自定义指令?
- 创建局部指令
var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { inserted(el) { // toDo } } } }) 复制代码
- 创建全局指令
Vue.directive('dir2', { inserted(el) { // inserted 表示元素插入时 // toDo } }) 复制代码
- 指令使用
<div id="app"> <div :dir1='..'></div> </div> 复制代码
如何自定义过滤器
- 创建局部过滤器
var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) filters: { // 指令名称 newfilter:function(value){ // toDo } } }) 复制代码
- 创建全局过滤器
Vue.filter('newfilter', function (value) { // toDo }) 复制代码
- 过滤器使用
<div>{{xxx | newfilter}}</div> 复制代码
vue常用修饰符有哪些,有什么用?
.prevent
:拦截默认事件.passive
:不拦截默认事件.stop
:阻止事件冒泡.self
:当事件发生在该元素而不是子元素的时候会触发.capture
:事件侦听,事件发生的时候会调用
vue等单页面应用优缺点是什么?
- 优点:
vue
的目的是通过尽可能简单的API
实现相应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。MVVM
,数据驱动,组件化,轻量,简洁,高效,快速。 - 缺点
- 不支持低版本的浏览器,最低只支持IE9
- 不利于SEO的优化
- 第一次加载首页耗时相对长一些,不可以使用浏览器的导航按钮需要自行实现前进和后退
如何让css仅在当前组件中起作用
在
<style>
标签上写入scoped
即可
「About Router」
关于路由,route / router 有什么区别?
route
表示路由信息对象,包括path
,params
,hash
,query
,fullPath
,matched
,name
等路由信息参数router
表示路由实例对象,包括了路由的跳转方法,钩子函数等
「译」 vue-Router中有哪些导航守卫
- 「全局前置钩子」:
beforeEach
,beforeResolve
,afterEach
- 「路由独享守卫」:
beforeEnter
- 「组件内部守卫」:
beforeRouteEnter
,beforeRouteUpdate
,beforeRouteLeave
导航解析流程:
- 导航被触发
- 在失活的组件里调用
beforeRouteLeave
离开守卫 - 调用全局的
beforeEach
守卫 - 在重用的组件里调用
beforeRouteUpdate
守卫 - 在路由配置里调用
beforeEnter
守卫 - 解析异步路由组件
- 在被激活的组件里调用
beforeRouteEnter
守卫 - 调用全局的
beforeResolve
守卫 - 导航被确认
- 调用全局的
afterEach
守卫 - 触发
Dom
更新 - 用创建好的实例调用
beforeRouteEnter
守卫中传给next
的回调
「译」vue-Router 中 hash / history 两种模式有什么区别?
hash
模式会在url
上显示'#',而history
模式没有- 刷新页面时,
hash
模式可以正常加载到hash
值对应的页面,history
模式没有处理的话,会返回404,一般需要后端将所有页面都配置重定向到首页路由 - 兼容性上,
hash
模式可以支持低版本浏览器和IE
「译」 vue-router 中 hash / history 是如何实现的?
hash
模式#
后面hash
值的变化,不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新页面,同时通过监听hashchange
事件可以知道hash
发生了哪些变化。根据hash
变化来实现页面的局部更新
history
模式history
模式的实现,主要是Html5
标准发布的两个Api(pushState
和replaceState
),这两个Api可以改变url
,但是不会发送请求,这样就可以监听url
的变化来实现局部更新
怎么定义 vue-router 的动态路由?怎么获取传过来的值
- 动态路由的创建,主要是使用
path
属性过程中,使用动态路径参数,以冒号开头
{ path:'/details/:id', name:'Details', components:Details } # 访问`details`前缀下的路径,例如`details/1`,`details/2`等,都会映射到`Details`这个组件 复制代码
- 当匹配到
/details
下的路由时,参数值会被设置到this.$route.params
下,所以通过这个属性可以获取动态参数
this.$route.params.id 复制代码
vue-router 传参方式有哪些?
- 通过
params
- 只能用
name
,不能用path
- 参数不会显示在
url
上 - 浏览器强制刷新会清空参数
- 只能用
- 通过
query
- 只能用
path
,不能用name
name
可以使用path
路径- 参数会显示在
url
上 - 浏览器刷新不清空参数
- 只能用
「About Vuex」
vuex有什么优缺点?
- 优点
- 解决了非父子组件的消息传递(将数据存放在
state
中) - 减少了
Ajax
请求次数,有些情景可以直接从内存中的State
获取
- 解决了非父子组件的消息传递(将数据存放在
- 缺点
- 刷新浏览器,
vuex
中的State
就会重新变回初始化状态
- 刷新浏览器,
vuex有哪几种属性?
State
:vuex
的基本数据,用来存储变量Getter
:从基本数据state
派生的数据,相当于state
的计算属性Mutation
:提交更新数据的方法,必须是同步的(需要异步则使用action
)。每个mutation
都有一个字符串的事件类型(type
)和一个回调函数(handler
)Action
:和mutation
的功能大致相同,不同在于action
提交的是mutation
,而不是直接变更状态action
可以包含任意异步操作
Module
:模块化vuex
,可以让每一个模块拥有自己的state
,mutation
,action
,getter
,使得结构清晰,方便管理
vuex 中的 state 有什么特性?
vuex
就是一个仓库,仓库里面放了很多对象,其中state
就是数据源存放地state
里面存放的数据是响应式的,Vue
组件从store
中读取数据,若是store
中的数据改变,依赖这个数据的组件也会更新数据- 它通过
mapState
把全局的state
和getters
映射到当前组件的computed
计算属性中
vuex 中的 getters 有什么特性?
getters
可以对state
进行计算操作,可以把它看做store
的computed
计算属性- 虽然在组件中也可以做计算属性,但
getters
可以在多个组件之间复用 - 如果一个状态只在一个组件内使用,是可以不用
getters
Vue 中对 Ajax 请求代码应该写在组件的 methods 中还是 vuex 的 actions 中?
- 如果请求的数据是不被其他组件公用的,仅仅在请求的组件内使用,就不需要放入
vuex
的state
里 - 如果被其他地方复用,可以将请求放入
action
里,方便复用;如果不需要复用这个请求,直接写在Vue
文件里会更方便
这篇关于重整旗鼓,2019自结前端面试小册【Vue.Js】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南