0

前端框架VUE面试基础问答

 2 years ago
source link: https://segmentfault.com/a/1190000040742601
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

前端框架VUE面试基础问答

发布于 54 分钟前

VUE属于现在比较热门的前端框架,在前端培训学习VUE好上手学习起来也不难,所以有时间还想从事前端的朋友还请认真看完。
什么是VUE?
首先Vue.js(VUE),是一套用于构建用户界面的渐进式JavaScript 框架,自底层向上应用,Vue的核心库只关注视图层,容易入门,可以和第三方库或者已有的项目进行整合,可以做复杂的单页应用。

VUE的两个核心是什么?
数据驱动:在VUE中,数据的改变会驱动视图的自动更新。传统做法是需要手动改变DOM来使视图更新,而VUE只需要改变数据。
组件化:组件化开发优点很多,可以很好的降低数据之间的耦合度。将常用代码封装成组件之后就能高度的复用,提高代码可复用性。
这里说一下,一个页面可以有多个模块/组件组成。
什么是VUE的MVVM模式?
MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步View 和 Model 的对象。
在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

MVVM和MVC有什么区别?
mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。

什么是VUE的双向绑定?
VUE的双向绑定是通过数据劫持结合发布者——订阅者的方式实现。
我们知道双方是绑定的,首先对数据进行劫持监听,所以需要监听器Observer,用来监听所有属性,如果属性发生变化,就需要告诉订阅者Watcher是否需要更新,因为订阅者是多个,所以要有一个消息订阅起来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理,接着有一个指令解析器conpile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板或者绑定相应的函数,此时订阅者Watcher接收到相应属性变化,就会执行对应的更新函数,从而更新视图。
实现一个监听器Observer,用来劫持所有属性,如果有变动就通知订阅者Watcher。
实现一个消息订阅器Watcher,用来收到属性的变化通知并执行相应函数从而更新。
实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板以及初始化相应的订阅器。

V-IF和V-SHOW有什么区别?
两者都是用来判断DOM节点是否显示。
实现方式
V-IF 根据后面数据的真假值判断从DOM树上删除或重建节点。
V-SHOW 只是修改CSS样式,也就是Display的属性。
编译条件
V-IF 是惰性的,如果初始条件为假则什么也不做,只有在第一条件为真时才开始局部编译 。
V-SHOW 是在任何条件下都被编译,然后被缓存,而且DOM元素始终保留。
编程过程
V-IF 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件。
V-SHOW 只是简单的基于CSS切换。
性能消耗
V-IF 有更高的切换消耗,不适合做频繁切换。
V-SHOW 有更高的渲染消耗,适合做频繁切换。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK