前端框架通识：MVVM是什么？

最新推荐文章于 2024-04-23 12:25:54 发布
最新推荐文章于 2024-04-23 12:25:54 发布
阅读量904 收藏 2
点赞数 1
分类专栏： 技术（javascript） 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echo_Ae/article/details/107242557
版权

可能很多人面试会被问到MVVM是什么？

MVVM 由以下三个内容组成：

  1. view：页面（视图）
  2. model：数据模型（模型）
  3. viewModel：作为桥梁负责沟通view和model（视图模型）

第一阶段（原生阶段），直接用JavaScript操作DOM节点，使用浏览器提供的原生API：

var dom = document.getElementById('name');
dom.innerHTML = 'an';
dom.style.color = 'red';

第二阶段，由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心：

$('#name').text('an').css('color', 'red');

第三阶段，MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。

现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，仅仅用jQuery是远远不够的，所以MVVM模型就应运而生。

第四阶段，MVVM是微软提出，它借鉴了桌面应用程序的MVC思想，在前端页面中，把model用纯javascript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel，ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

通俗来讲：

在 MVVM 中，UI 是通过数据驱动的，数据一旦改变就会相应的刷新对应的 UI，UI 如果改变，也会改变对应的数据。

这种方式就可以在业务处理中只关心数据的流转，而无需直接和页面打交道。

ViewModel 只关心数据和业务的处理，不关心 View 如何处理数据，在这种情况下，View 和 Model 都可以独立出来，任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个 ViewModel 中，让多个 View 复用这个 ViewModel。

在 MVVM 中，最核心的也就是数据双向绑定，例如 Angluar 的脏数据检测，Vue 中的数据劫持。

MVVM框架和jQuery操作DOM相比有什么区别？

jQuery实现修改两个DOM节点的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#name").click(function(){
    var name = 'an-an-s';
	var age = 22;
	$('#name').text(name);
	$('#age').text(age);
  });
});
</script>
</head>
<body>
<p>Hello, <span id="name">an</span>!</p>
<p>You are <span id="age">12</span>.</p>
</body>
</html>

MVVM框架（vue）来实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></script>
</head>
<body>
    <div id="app">
        <p @click="test">Hello, <span id="name">{{userInfo.name}}</span>!</p>
        <p>You are <span id="age">{{userInfo.age}}</span>.</p>
    </div>
</body>
</html>
<script>
    var app = new Vue({
      el: '#app',
      data: {
        userInfo: {
            name: "an", 
            age: 12
        }
      },
      methods: {
          test() {
              this.userInfo.name = "an-an-s"
              this.userInfo.age = 51
          }
      }
    })
    </script>

看代码并运行起来跑了看一下，我们可以得出：

jQuery是直接操作DOM

MVVM（vue）它是操作javascript对象（data里面的userInfo），这就是虚拟DOM（里面做了什么操作在深入vue原理计划讲）

Angluar脏数据检测

当触发了指定事件后会进入脏数据检测，这时会调用 $digest 循环遍历所有的数据观察者，判断当前值是否和先前的值有区别，如果检测到变化的话，会调用 $watch 函数，然后再次调用 $digest 循环直到发现没有变化。循环至少为二次 ，至多为十次。

脏数据检测虽然存在低效的问题，但是不关心数据是通过什么方式改变的，都可以完成任务，但是这在 Vue 中的双向绑定是存在问题的。并且脏数据检测可以实现批量检测出更新的值，再去统一更新 UI，大大减少了操作 DOM 的次数。所以低效也是相对的，这就仁者见仁智者见智了。

Vue数据劫持

Vue 内部使用了 Object.defineProperty() 来实现双向绑定（vue3是使用Proxy），通过这个函数可以监听到 set 和 get 的事件。

Object.difineProperty

Object.defineProperty(obj, prop, descriptor)

obj：要定义属性的对象。
prop：要定义或修改的属性的名称或 Symbol 。
descriptor：要定义或修改的属性描述符。

入门例子： 

let obj = {
    name: 'an',
    age: 18
}
console.log(obj)
Object.defineProperty(obj, "name", {
    get: function() {
        console.log("get---", name)
        return name
    },
    set: function(newName) {
        console.log("set---",newName, 'age---', this.age)
        name = newName
    }
})
obj.name = "an-an-s"
obj.age = 22

console.log(obj)
console.log(obj.name)

// { name: 'an', age: 18 }
// set--- an-an-s age--- 18
// { name: [Getter/Setter], age: 22 }
// get--- an-an-s
// an-an-s

加深一点的例子：

var data = { name: 'an' }
observe(data)
let name = data.name // -> get value
data.name = 'an-an-a' // -> change value

function observe(obj) {
  // 判断类型
  if (!obj || typeof obj !== 'object') {
    return
  }
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key])
  })
}

function defineReactive(obj, key, val) {
  // 递归子属性
  observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      console.log('get value')
      return val
    },
    set: function reactiveSetter(newVal) {
      console.log('change value')
      val = newVal
    }
  })
}

以上代码简单的实现了如何监听数据的 set 和 get 的事件，但是仅仅如此是不够的，还需要在适当的时候给属性添加发布订阅。

<div>{{name}}</div>

在解析如上模板代码时，遇到 {{name}} 就会给属性 name 添加发布订阅。

// 通过 Dep 解耦
class Dep {
    constructor() {
      this.subs = []
    }
    addSub(sub) {
      // sub 是 Watcher 实例
      this.subs.push(sub)
    }
    notify() {
      this.subs.forEach(sub => {
        sub.update()
      })
    }
}
// 全局属性，通过该属性配置 Watcher
Dep.target = null

function update(value) {
    document.querySelector('div').innerText = value
}

class Watcher {
    constructor(obj, key, cb) {
      // 将 Dep.target 指向自己
      // 然后触发属性的 getter 添加监听
      // 最后将 Dep.target 置空
      Dep.target = this
      this.cb = cb
      this.obj = obj
      this.key = key
      this.value = obj[key]
      Dep.target = null
    }
    update() {
      // 获得新值
      this.value = this.obj[this.key]
      // 调用 update 方法更新 Dom
      this.cb(this.value)
    }
}

function observe(obj) {
    // 判断类型
    if (!obj || typeof obj !== 'object') {
      return
    }
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key])
    })
}
  
function defineReactive(obj, key, val) {
    // 递归子属性
    observe(val)

    let dp = new Dep()

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            console.log('get value')
            // 将 Watcher 添加到订阅
            if (Dep.target) {
                dp.addSub(Dep.target)
            }
            return val
        },
        set: function reactiveSetter(newVal) {
            console.log('change value')
            val = newVal
            // 执行 watcher 的 update 方法
            dp.notify()
        }
    })
}

var data = { name: 'an' }
observe(data)
// 模拟解析到 `{{name}}` 触发的操作
new Watcher(data, 'name', update)
// update Dom innerText
data.name = 'an'

以上实现了一个简易的双向绑定，核心思路就是手动触发一次属性的 getter 来实现发布订阅的添加。

Proxy

let p = new Proxy(target, handler);

target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。具体的

入门例子：

let test = {
    name: "an",
    age: 18
};
console.log(test);
test = new Proxy(test, {
    get: function(target, key) {
        console.log('get---', target, key);
        return target[key];
    },
    set: function(target, key, value) {
        console.log('set---', target, key, value);
        return Reflect.set(target, key, value);
    }
});
test.name = "an-an-s";
test.age = 18;
console.log(test);
console.log(test.name);

// { name: 'an', age: 18 }
// set--- { name: 'an', age: 18 } name an-an-s
// set--- { name: 'an-an-s', age: 18 } age 18
// { name: 'an-an-s', age: 18 }
// get--- { name: 'an-an-s', age: 18 } name
// an-an-s

Proxy 与 Object.defineProperty 对比

Object.defineProperty是实现了双向绑定了，但是他还是有缺陷的：

  1. 只能对属性进行数据劫持，所以需要深度遍历整个对象
  2. 对于数组不能监听到数据的变化

虽然 Vue 中确实能检测到数组数据的变化，但是其实是使用了 hack 的办法（覆盖原型方法），并且也是有缺陷的。

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
// hack 以下几个函数
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
methodsToPatch.forEach(function(method) {
  // 获得原生函数
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator(...args) {
    // 调用原生函数
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // 触发更新
    ob.dep.notify()
    return result
  })
})

反观 Proxy 就没以上的问题，原生支持监听数组变化，并且可以直接对整个对象进行拦截，所以 Vue 也将在下个大版本中使用 Proxy 替换 Object.defineProperty

let test = [
    {
        name: "an",
        age: 18
    }
]
console.log(test);
test = new Proxy(test, {
    get: function(target, key) {
        console.log('get---', target, key);
        return target[key];
    },
    set: function(target, key, value) {
        console.log('set---', target, key, value);
        return Reflect.set(target, key, value);
    }
});
test[0].name = "an-an-s";
test[0].age = 18;
console.log(test);
console.log(test[0].name);

// [ { name: 'an', age: 18 } ]
// get--- [ { name: 'an', age: 18 } ] 0
// get--- [ { name: 'an-an-s', age: 18 } ] 0
// [ { name: 'an-an-s', age: 18 } ]
// get--- [ { name: 'an-an-s', age: 18 } ] 0
// an-an-s

参考：

https://yuchengkai.cn/docs/frontend/framework.html#mvvm

https://www.liaoxuefeng.com/wiki/1022910821149312/1108898947791072

An_s
关注
专栏目录
前端框架MVVM是什么（整理）
weixin_34352449的博客
11-05 1万+
前端框架MVVM是什么（整理） 一、总结 一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。   1、我大前端应该不应该做复杂的数据处理的工作？ 不应该 只要后端保证对外接口足够简单就行了，我请求api，你把数据返出来，咱俩就这点关系，其他都扯淡。 后端：我们这里的业务逻辑和数据处理会非常复杂！ 前端：关我屁...
mvvm是什么？
weixin_61434466的博客
04-25 3846
1、总结 一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v(view层)实现数据的双向绑定 2、mvc和mvvm的关系？ 改进版 数据分离 视图模型层 c（控制层）被换成了vm（viewmodel）层 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。 mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可 3.MVVM模式的优点以及与MVC模式的区别? MVVM模式的优点： 1、低耦合.
轻量级前端MVVM框架avalon - 整体架构
baoaoba9317的博客
06-19 156
官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面，绑定事件，切换类名，什么脏活都揽 右边是ViewModel 视图模式,就是开发者通过avalon.define("xxx", function(vm){vm.firs...
前端MVVM框架设计及实现（一）
baoaoba9317的博客
03-21 257
最近抽出点时间想弄个dom模块化的模板引擎，不过现在这种都是MVVM自带的，索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了，我记得还是去年6月写过一个系列的avalon源码分析的，不过那时候0.7版本，不够健全，现在已经好太多了 框架是面向一个领域，提供一套解决方案，那么我们用前端的MVVM能为我们带来什么便利？ 关注点分离 ...
mvvm框架是什么
lb_888888的博客
02-04 1391
在开发过程中，由于需求的变更或添加，项目的复杂度越来越高，代码量越来越大，此时我们会发现MVC维护起来有些吃力，尤其Controller控制层非常的厚重，非常的庞大，难以维护。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。
mvvm:mvvm框架理解
05-10
MVVM框架在JavaScript开发中扮演着重要的角色，它通过数据绑定和自动更新机制简化了前端开发，提高了代码的可读性和可维护性。了解并熟练掌握MVVM框架，对于提升JavaScript开发能力至关重要。在实际项目中，可以根据...
aladdin:mvvm 网络应用程序框架
06-17
**Aladdin: MVVM 网络应用程序框架详解** Aladdin 是一款专为构建网络应用程序设计的MVVM（Model-View-ViewModel）框架。在现代Web开发中，MVVM架构模式已经成为主流，它将应用程序的业务逻辑、视图模型和用户界面...
MVVM框架
热门推荐
腻害
04-10 2万+
在WPF开发中，经典的编程模式是MVVM，是为WPF量身定做的模式，该模式充分利用了WPF的数据绑定机制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI显示和逻辑代码的耦合度，如需要更换界面时，逻辑代码修改很少，甚至不用修改。 与WinForm开发相比，我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI，而在WPF中通常是通过数据绑定来更新UI；在响应用户操作上，WinForm是通过控件的事件来处理，而WPF可以使用命令绑定的方式来处理，耦合度将降低。 一、MVVM框架简介 1. 什
前端框架MVVM是什么(整理)
程宇寒
08-06 2万+
一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。
前端MVVM框架avalon揭秘 - HTML编译器
baoaoba9317的博客
07-31 126
MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离，因为，很多这样的模式的实现都需要利用声明式数据绑定来实现讲View(视图)工作从其他层分离 所以出现了一大堆自定义的声明式的语法： 如:Avalon 作用域绑定(ms-controller, ms-important) 模板绑定(ms-include) 数据填充(ms-text, ms-html...
MVVM框架介绍
weixin_44540475的博客
06-27 9400
1、MVVM是什么？ 1、MVVM是Model-View-ViewModel的简写 2、它本质上是MVC 的改进版 3、MVVM（Model-View-ViewModel）框架的由来是MVP（Model-View-Presenter）模 与WPF结合的应用方式时发展演变过来的一种新型架构框架 2、MVVM的优点 MVVM模式和MVC模式一样，主要目的是分离视图（view）和模型（Model）,有几大优点 1、低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"Vi
Web前端中的MVVM
赵星海的博客
06-30 464
MVVM对应前端开发的内容： MVVM原理和流程：
前端框架通识：路由原理
echo_Ae的博客
07-13 381
前端路由是现代单页面（SPA）应用必备的功能，每个现代前端框架都有对应的实现，例如vue-router、react-router。 我们不想探究vue-router或者react-router们的实现，因为不管是哪种路由无外乎用兼容性更好的hash实现或者是H5 History实现，与框架几个只需要做相应的封装即可。 前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单（SPA）页面使用的路由就只有两种实现方式： hash模式 histor
Vue的MVVM框架是什么？三个核心组成部分是？特点是？（通俗易懂版，带具体例子）
最新发布
m0_59704905的博客
04-23 1624
Vue.js 支持组件化开发，将页面拆分为多个独立的组件，每个组件负责管理自己的视图和数据。MVVM 是一种设计模式，它用于构建用户界面，通过将用户界面的开发和业务逻辑的开发分离开来，使得代码更加模块化、可维护性更高，简化前端开发过程。Vue.js 提供了双向数据绑定的能力，使得模型和视图之间的数据同步变得简单。，它连接了数据模型和视图，通过 Vue 的数据绑定和事件监听，实现了数据和视图之间的同步和交互。：HTML 部分，它定义了用户界面的结构和外观，展示了待办事项列表和输入框。
怎么理解VUE，VUE的数据驱动原理是什么，解释MVVM框架
那一日面朝大海的博客
01-30 1万+
一：Vue是什么，怎么理解Vue Vue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点： （1）简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化 vue靠数据驱动双向绑定使我们开发页面更简单，开发者不需要手动的去修改dom。Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定，底层是通...
前端MVVM模式
java全包开发，java辅导
10-19 186
1. 概念：什么是MVVM： （Mpdel-View-ViewModel） MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下： 2. 双向绑定老式jquery写法如下：（麻烦） 3.优势： 4.组成部分： 6.ViewModel是前后端分离的最重要的一环，如果没有ViewModel，那么前后端分离达不到真正的前后端分离 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

An_s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值