本次给大家分享一些关于Vue的常见面试题,带你梳理基础知识,增强Vue知识储备,值得收藏,快来看看吧!
分享的是一些Vue的常见面试题,是不代表全部。如果文章有不对的地方欢迎指出,有疑惑 或者有其他面试题的小伙伴也可以在评论区留言分享,大家一起交流探讨,谢谢!
父子组件通信:props
和 event
、v-
model
、 .sync
、 ref
、 $parent
和
$children
。(学习视频分享:vue视频教程)
非父子组件通信:$attr
和 $listeners
、
provide
和 inject
、eventbus
、通过根实例$root
访问、vuex
、dispatch
和
brodcast
vue 2.0v-model
是⽤来在表单控件或者组件上创建双向绑定的,他
的本质是 v-bind
和 v-on
的语法糖,在
⼀个组件上使⽤ v-model
,默认会为组件绑定名为 value
的
prop
和名为 input
的事件。
Vue3.0
在 3.x 中,⾃定义组件上的 v-model
相当于传递了 modelValue
prop
并接收抛出的update:modelValue
事件
Vuex和全局对象主要有两种区别:
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发⽣变 化,那么相应的组件也会相应地得到⾼效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯⼀途径就是显式地提交 (commit)mutation。这样使得我们可以⽅便地跟踪每⼀个状态的变化,从⽽让我们能够实现⼀些⼯ 具帮助我们更好地了解我们的应⽤。
渲染过程:⽗组件挂载完成⼀定是等⼦组件都挂载完成后,才算是⽗组件 挂载完,所以⽗组件的mounted在⼦组件mouted之后
⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate -> ⼦created -> ⼦beforeMount -> ⼦mounted -> ⽗mounted
⼦组件更新过程:
⽗组件更新过程:
销毁过程:⽗beforeDestroy -> ⼦beforeDestroy -> ⼦ destroyed -> ⽗destroyed
看起来很多好像很难记忆,其实只要理解了,不管是哪种情况,都⼀定是⽗组件等待⼦组件完 成后,才会执⾏⾃⼰对应完成的钩⼦,就可以很容易记住
v-if
会在切换过程中对条件块的事件监听器和⼦组件进⾏销毁和重建,如果初始条件是false,则什么都不做,直到条件第⼀次为true时才开始渲
染模块。
v-show
只是基于css进⾏切换,不管初始条件是
什么,都会渲染。
所以, v-if
切换的开销更⼤,⽽ v-show
初始化渲染开销更
⼤,在需要频繁切换,或者切换的部分dom很复杂时,使⽤ v-show
更合
适。渲染后很少切换的则使⽤ v-if
更合适。
在⽹站上动态渲染任意 HTML,很容易导致 XSS 攻击。所以只能在可信内 容上使⽤ v-html,且永远不能⽤于⽤户提交的内容上。
key
是给每个 vnode
指定的唯⼀ id
,在同
级的 vnode
diff 过程中,可以根据 key
快速的对⽐,来判断是
否为相同节点,并且利⽤ key
的唯⼀性可以⽣成 map
来更快的获
取相应的节点。
另外指定 key
后,就不再采⽤“就地复⽤”策略了,可以保证渲染的准确性
。
v-for
和 v-if
处于同⼀个节点时, v-
for
的优先级⽐ v-if
更⾼,这意味着 v-if
将分别重复
运⾏于每个 v-for
循环中。如果要遍历的数组很⼤,⽽真正要展示的数据很少时
,这将造成很⼤的性能浪费。computed
,先对数据进⾏过滤。区别:
url 展示上,hash 模式有 "#",history 模式没有
刷新⻚⾯时,hash 模式可以正常加载到 hash 值对应的⻚⾯,⽽ history 没有处 理的话,会返回404,⼀般需要后端将所有⻚⾯都配置重定向到⾸⻚路由。
兼容性。hash 可以⽀持低版本浏览器和 IE
#
后⾯ hash 值的变化,不会导致浏览器向服务器发出请求,浏览器不发出请
求,就不会刷新⻚⾯。同时通过监听 hashchange 事件可以知道 hash 发⽣了哪些变化,然后根据
hash 变化来实现更新⻚⾯部分内容的操作。
history 模式的实现,主要是 HTML5 标准发布的两个 API, pushState
和
replaceState
,这两个 API 可以在改变 url,但是不会发送请求。这样就可以监
听 url 变化来实现更新⻚⾯部分内容的操作。
Model-View-ViewModel
缩写,也就是把 MVC
中
的 Controller
演变成 ViewModel
。流程总结如下:
1、当组件初始化的时候, computed
和 data
会分别建⽴各
⾃的响应系统, Observer
遍历 data
中每个属性设置
get/set
数据拦截
2、初始化 computed
会调⽤ initComputed
函数
注册⼀个 watcher
实例,并在内实例化⼀个 Dep
消
息订阅器⽤作后续收集依赖(⽐如渲染函数的 watcher
或者其他观察该计算属性
变化的 watcher
)
调⽤计算属性时会触发其 Object.defineProperty
的
get
访问器函数
调⽤ watcher.depend()
⽅法向⾃身的消息订阅器
dep
的 subs
中添加其他属性的watcher
调⽤ watcher
的 evaluate
⽅法(进⽽调⽤
watcher
的 get
⽅法)让⾃身成为其他watcher
的消息订阅器的订阅者,⾸先将 watcher
赋给 Dep.target
,然
后执⾏ getter
求值函数,当访问求值函数⾥⾯的属性(⽐如来⾃
data
、 props
或其他 computed
)时,
会同样触发它们的 get
访问器函数从⽽将该计算属性的 watcher
添加到求值函数中属性的watcher
的消息订阅器 dep
中,当这些
操作完成,最后关闭 Dep.target
赋为 null
并
返回求值函数结果。
3、当某个属性发⽣变化,触发 set
拦截函数,然后调⽤⾃身消息订阅器
dep
的 notify
⽅法,遍
历当前 dep 中保存着所有订阅者 wathcer
的 subs
数组,并逐个
调⽤ watcher
的 update
⽅
法,完成响应更新。
如果⾯试被问到这个问题,⼜描述不清楚,可以直接画出 Vue 官⽅⽂档的这个图,对着图来 解释效果会更好。
Object.defineProperty
对数据进⾏劫持,并结合观察者模式实现。Object.defineProperty
创建⼀个 observe
来
劫持监听所有的属性,把这些属性全部转为 getter
和 setter
。watcher
实例,它会在组件渲染的过
程中把使⽤过的
数据属性通过 getter
收集为依赖。之后当依赖项的 setter
触发
时,会通知 watcher
,从⽽使它关联的组件重新渲染。Object.defineProperty
只能劫持对象的属性,⽽ Proxy
是直接代理对象由于
Object.defineProperty
只能对属性进⾏劫持,需要遍历对象的每个属性。⽽
Proxy 可以直接代理对象。
Object.defineProperty
对新增属性需要⼿动进⾏
Observe
, 由于Object.defineProperty
劫持的是对象的属性,
所以新增属性时,需要重新遍历对象,对其新
增属性再使⽤ Object.defineProperty
进⾏劫持。 也正是因为这个原因,使⽤
Vue 给 data
中的数组或对象新增属性时,需要使⽤ vm.$set
才能
保证新增的属性也是响应式的。
Proxy
⽀持13种拦截操作,这是
defineProperty
所不具有的。
新标准性能红利Proxy 作为新标准,⻓远来看,JS引擎会继续优化
Proxy
,但 getter
和 setter
基本不会再有针对
性优化。
Proxy
兼容性差 ⽬前并没有⼀个完整⽀持 Proxy
所
有拦截⽅法的Polyfill⽅案
Vue 的 Observer
对数组做了单独的处理,对数组的⽅法进⾏编译,并赋值给
数组属性的 __proto__
属性上,因为原型链的机制,找到对应
的⽅法就不会继续往上找了。编译⽅法中会对⼀些会增加索引的⽅法( push
,
unshift
, splice
)进⾏⼿动 observe。
能回答清楚这道问题的前提,是清楚 EventLoop 过程。
nextTick
对于 micro task 的实现,会先检测是否⽀持
Promise
,不⽀持的话,直接指向 macrotask,⽽ macro task 的实现,优先检
测是否⽀持 setImmediate
(⾼版本IE和Etage⽀持),不⽀持的再去检测是否⽀
持 MessageChannel,如果仍不⽀持,最终降级为 setTimeout
0;v-on
)。注意:之所以将 nextTick
的回调函数放⼊到数组中⼀次
性执⾏,⽽不是直接在 nextTick
中执⾏回调函数,是为了保证在同⼀个tick内多
次执⾏了 nextTcik
,不会开启多个异步任务,⽽是把这些异步任务都压成⼀个同
步任务,在下⼀个tick内执⾏完毕。
vue模板的编译过程分为3个阶段:
将模板字符串解析⽣成 AST,⽣成的AST 元素节点总共有 3 种类型,1 为普通元素, 2 为 表达式,3为纯⽂本。
Vue 模板中并不是所有数据都是响应式的,有很多数据是⾸次渲染后就永远不会变化的,那么 这部分数据⽣成的 DOM 也不会变化,我们可以在 patch 的过程跳过对他们的⽐对。
此阶段会深度遍历⽣成的 AST 树,检测它的每⼀颗⼦树是不是静态节点,如果是静态节点则 它们⽣成DOM 永远不需要改变,这对运⾏时对模板的更新起到极⼤的优化作⽤。
1、⽣成代码
const code = generate(ast, options)
通过 generate ⽅法,将ast⽣成 render 函数。
Vue3.x改⽤ Proxy
替代Object.defineProperty。因为Proxy可以直接监听对
象和数组的变化,并且有多达13种拦截⽅法。并且作为新标准将受到浏览器⼚商重点持续的性能优
化。
Proxy只会代理对象的第⼀层,那么Vue3⼜是怎样处理这个问题的呢?
判断当前Reflect.get的返回值是否为Object,如果是则再通过 reactive ⽅法做代理, 这 样就实现了深度观测。
监测数组的时候可能触发多次get/set,那么如何防⽌触发多次呢?
我们可以判断key是否为当前被代理对象target⾃身属性,也可以判断旧值与新值是否相等, 只有满足以上两个条件之⼀时,才有可能执⾏trigger。
编码阶段
SEO优化
打包优化
用户体验
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。
以上是【整理分享】一些Vue高频面试题的详细内容。更多信息请关注PHP中文网其他相关文章!