请选择 进入手机版 | 继续访问电脑版
创作

2020 Vue面试通杀秘籍

面试相关  / 只看大图  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-7-18

跳转到指定楼层
本帖最后由 明教小昭 于 2020-7-20 14:47 编辑

理论篇:

1.说说对 Vue渐进式框架的理解(腾讯医典)


a. 渐进式的含义:主张最少, 没有多做职责之外的事
b. Vue 有些方面是不如 React,不如 Angular.但它是渐进的,没有强主张,你可以在原有系统的上面,把一两个组件改用它实现,当 jQuery用;
c. 也可以整个用它全家桶开发,当 Angular 用;还可以用它的视图,搭配 你自己设计的整个下层用。
d. 你可以在底层数据逻辑的地方用 OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。

2.vue 的双向绑定的原理(腾讯医典)

a.  数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
b. 具体实现流程:
i.实现一个监听器 Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者
ii.实现一个订阅者 Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图
iii.实现一个解析器 Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器
c. 把下面的流程图说清楚就差不多了:

微1.png




3.Vue1.x 的设计理念是什么?2.x的呢?(58同城)


Vue1.x设计理念

a. 早期 Vue 是采用数据绑定、依赖收集的方式去观察数据变化并保留对实际 DOM 元素的引用,当有数据变化时进行对应的操作。
b. 少量数据更新对比 Virtual DOM 性能更好,坏处是大量数据更新、初始渲染性能、对比 Virtual DOM 性能更差
c. 图解:
微2.png

Vue2.x设计理念


微3.png


d. 传统的 vdom的性能和模板大小正相关,跟动态节点的数量无关。在一些组件只有少量的动态节点的情况下,这些遍历产生了性能浪费。根本原因是 JSX和手写的 render function是完全动态的。过度的灵活性导致运行时可以用于优化的信息不足。


e. 所以 2.x的优化是: 推出了一个区块树(Block tree)

微4.png


1.将模块基于动态节点指令切割为嵌套的区块
2.每个区块内部的节点结构是固定的
3.每个区块只需要一个 Array追踪自身所包含的动态节点
4.新策略将 vdom 更新性能从与整体模块大小相关提升为与动态内容的数量相关。

应用篇:


1、Key的作用是什么?可以用数组的 index(下标)代替么?(美团)
a. key的作用主要是为了高效的更新虚拟 DOM。另外 vue中在使用相同标签 名元素的过渡切换时,也会使用到 key属性,其目的也是为了让 vue可以区分它们。否则 vue只会替换其内部属性而不会触发过渡效果
b. key不能用 index代替,index在同一个页面会有重复的情况,违背了高效渲染的初衷。

2、Vue 组件中 data 为什么必须是函数?(58同城)
a.  在 new Vue() ,data是可以作为一个对象进行操作 的 , 然而在 component 中,data只能以函数的形式存在,不能直接将对象赋值给它。
b.当 data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的 data不会相互影响,是独立的。

3、$route和 $router 的区别是什么?(深信服)
a.  $router为 VueRouter的实例,是一个全局路由对象,包含了路由跳转的方 法、钩子函数等。
b.  $route 是路由信息对象||跳转的路由对象,每一个路由都会有一个 route对象,是一个局部对象,包含 path,params,hash,query,fullPath,matched,name等路由信息参数。

以上就是Vue面试的技巧,想要成为一个优秀的前端工程师,就需要不断学习,每天积累新的知识,并将学到的运用到工作项目中。我这里还有更多前端学习资源和面试题库,有想要了解前端、学习前端的小伙伴可以加我QQ:822311796  更有某机构价值5980元的VIP零基础前端入门视频免费送哟~


更多前端进阶知识,尽在WEB明教光明顶(https://web.xingruanedu.com

转播转播 分享分享 分享淘帖 反对反对
回复

使用道具

成为第一个回答人

B Color Link Quote Code Smilies
站点地图|手机版|WEB明教光明顶 |湘ICP备19021820号-1
Powered by WEB明教  © 2017-2020 Starsoft.
返回顶部