前端框架VUE面试基础问答

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

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

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

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 有更高的渲染消耗,适合做频繁切换。

    推荐阅读