MVVM是什么，MVVM详细介绍-励北网

MVVM是什么，MVVM详细介绍

MVVM是什么，MVVM详细介绍

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。他也是用来开发web应用程序，他把应用程序分成三个部分

M: model 应用的核心（数据）
V: view 应用的界面
VM： viewmodel，视图模型。他是整个mvvm的核心，他是一个桥梁，连接M与V，能够做到数据变了、页面自动更新（vue）。

从上面描述可以看到很多vue的影子，vue就是基于此思想实现响应式数据模板的。学习MVVM重点也是学习VM。

VM的实现(ES5版本)

要实现VM，首先从其功能入手：VM作为桥梁，连接视图与模型，然后数据发生变化，页面自动更新。

实现思路：

监听数据发生变化（监听了数据的两个行为）
数据：也就是model对象
行为：model对象下属性的读取与修改
数据一旦发生变化，通知视图更新

VM的具体实现

监听数据发生变化需要使用到es5提供的一个古老的api：Object.defineProperty。

此api的意思是：定义对象的某一个属性，用于监听改属性的读取与修改。由于此api比较古老，所以使用的过程中会出现死循环等问题，解决方式比较固定。

整体的代码如下

// Mconst model = { name: '张三', age: 20, }// VM: 视图模型，作为桥梁连接视图与模型，数据变化页面自动更新。 // 在没定义name之前保存一份副本let _name = model.nameObject.defineProperty(model, 'name', { // 读取 get() { return _name }, // 修改 set(newVal) { _name = newVal // 数据变了，通知视图更新 render() } })// Vfunction render() { app[xss_clean] = ` <span>${model.name}</span> <button onclick="changeName()">改名</button> `} render()function changeName() { model.name = '李四'}

vue2响应式数据的缺陷【重点】

由于vue底层是响应式模块是通过Object.defineProperty此api取实现，所以带来了一些问题，问题如下：

Object.defineProperty一次只能监听一个属性，
对于对象新增的属性，vue2没法监听到，除非使用set方法，详情见一节
vue2会深度遍历data下的对象，重写每一个属性的getter、setter，即使这个属性最终不再页面上使用。造成性能你浪费！

vue2响应式数据修改的注意事项【重要】

有些情况下，数据发生变化，页面也不会更新。官方说明：
https://v2.cn.vuejs.org/v2/guide/reactivity.html

对于对象：新增属性与删除属性监听不到，
使用set（给vue的对象添加一个响应式的属性）可以解决，语法如下：
this.$set(对象，属性名, 值)

对于数组
通过索引直接修改这一整项, 解决方式： this.$set(数组，索引, 值)
为什么不能通过索引修改数组：数组的长度不固定，也许会上百上千，开销就非常大，所以vue根本没有重写数组索引的get和set.r如果你要自己重写，代码如下，看一参考着理解

```js // 你可以把数组的索引看成对象的键名，数组的值，看成键值。也就是arr看成arrObj这个形式 let arr = ['a', 'b', 'c'] let arrObj = { 0: 'a', 1: 'b', 2: 'c' } // 重写索引. 如果数组很长，会很消耗性能 for(let i in arr) { Object.defineProperty(arr, i, { get(){}, set(){} }) } ```

改变数组的长度，也不行

搭建一个cnd的vue2开发环境进行测试

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app">  {{ user }} <button @click="changeName">改名</button> <div> {{ arr }} <button @click="changeArr">改arr</button> </div> <div> {{ arrObj }} <button @click="changeArrObj">改变数组对象中的某一项</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { user: { name: '张三', age: 24, }, arr: ['张三', '李四', '王五'], arrObj: [ {name: 'xxx1', age: 24}, {name: 'xxx2', age: 25}, {name: 'xxx3', age: 26}, ] }, methods: { changeArrObj() { console.log(this.arrObj) // 通过索引改了数组 this.arrObj[0] = '坤坤' }, changeName() { // this.user.name = '李四' // 新增的属性没有getter、setter，所以不是一个响应式数据，所以sex怎么变，页面都不会更新 // this.user.sex = '男' // Vue.set: 构造函数.方法 ---》静态方法 // this.$set 实例.方法 ----》原型上的方法 // 给 user这个对象新增一个响应式的属性sex，初始值为男 this.$set( this.user, 'sex', '男' ) console.log(this.user) }, // 改变数组 changeArr() { // 讲数组的第一项换成老王 this.$set(this.arr, 0, '老王') // this.arr[0] = '老王' // console.log(this.arr) }, }, // vue，初始化完数据（使用Object.defineProperty来监听每一个属性） created() { console.log(this.user) }, mounted() { console.log('mounted') } }) </script></body></html>

VM的实现（es6版本）

Proxy的使用

proxy的特点：1. 格局大，代理整个对象。 2. 功能也强大：能够代理13种行为。3.语法比defineProperty简单了很多。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截。从这个描述来看，Proxy天然的适合做VM这一层代理。其基本语法如下：

// 要被代理的对象const model = { name: '张三'}// 代理对象（new出来的proxy）const proxy = new Proxy(model, { // 监听到操作 get(target, key) { return target[key] }, set(target, key, newVal) { // 设置值 target[key] = newVal } })// 操作（通过代理对象去操作） // 进行修改proxy.name = '李四'// 进行读取proxy.get

具体实现

<div id="app"></div> <script> // M const model = { name: '张三', age: 24 } // VM let proxy = new Proxy(model, { get(target, key) { return target[key] }, set(target, key, newVal) { // 改变数据 target[key] = newVal // 通知视图更新 render() } }) // V function render() { app[xss_clean] = ` ${proxy.name} - ${proxy.age} <button onclick="changeName()">改变</button> <button onclick="changeAge()">改变年龄</button> ` } render() function changeName() { // 改数据 proxy.name = '李四' } function changeAge() { proxy.age = 40 } </script>