阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      谈一下你对 Vue.js 的 MVVM 原理的理解

      问题

      谈一下你对 Vue.js 的 MVVM 原理的理解

      答案

      传统MVC

      传统的MVC指的是

      • M是指业务模型,Model(模型)
      • V是指用户界面,View(视图)
      • C则是控制器,Controller(控制器)

      使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。

      https://a.axihe.com/focus/vue/01-mvc.jpg

      如上图所示,用户操作会请求服务端路由,路由会调用对应的控制器来处理,控制器会获取数据。将结果返回给前端,页面重新渲染

      MVVM

      MVVM 是 Model-View-ViewModel 的缩写

      • Model 代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑。
      • View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来。
      • ViewModel 监听模型数据的改变和控制视图⾏为、处理⽤户交互,简单理解就是⼀个同步View 和 Model 的对象,连接 Model 和 View

      传统的前端会将数据手动渲染到页面上,MVVM模式不需要用户手动操作dom元素;

      将数据绑定到viewModel层上,会自动将数据渲染到页面中,视图变化会通知viewModel层更新数据。

      ViewModel就是我们MVVM模式中的桥梁.

      https://a.axihe.com/focus/vue/01-mvvm.jpg

      在 MVVM 架构下, View 和 Model 之间并没有直接的联系,⽽是通过 ViewModel 进⾏交互, Model 和 ViewModel 之间的交互是双向的, 因 此 View 数据的变化会同步到Model中,⽽Model 数据的变化也会⽴即反 应到 View 上。

      ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,⽽ View 和 Model 之间的同步⼯作完全是⾃动的,⽆需⼈为⼲涉,因此开 发者只需关注业务逻辑,不需要⼿动操作DOM,不需要关注数据状态的同 步问题,复杂的数据状态维护完全由 MVVM 来统⼀管理

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录