MVVM是什么?


MVVM是一种设计思维，它是Model-View-ViewModel的缩写。它也是MVC的增强版。

Model是代表数据模型，也能够在Model中定义数据批改和操作的业务逻辑。
View是代表UI组件，它负责将数据模型转化成UI展示进去。
ViewModel是一个同步View和Model的对象。

在MVVM框架下，View和Model之间并没有间接分割，而是通过ViewModel（桥梁）进行交互。
Model和ViewModel之间的交互是双向的。
ViewModel通过双向数据绑定将View和Model层连贯了起来，而View和Model之间的同步工作都是齐全主动的，无需人为操作。

MVVM解决什么问题?

MVC和MVVM的区别其实并不大。都是一种设计思维。

次要就是MVC中Controller演变成MVVM中的viewModel。

MVVM次要解决了MVC中大量的DOM操作使页面渲染性能升高，加载速度变慢，影响用户体验。

当和Model频繁发生变化，开发者须要被动更新到View。

MVVM实现思路

页面变动如何告诉对象
分成两步，
step1 页面变动如何监听
step2 给对象设值

//1addEventListern,// 2obj.value=e.target.value

对象变动如何告诉页面
也是分成两步
step1 如何监听对象变动 两种形式：set 办法形式, proxy 形式
step2 给页面元素赋值

//1let vm = new Proxy(obj,{   get function(obj, prop){}   set function(obj, prop, value){      // 我变动了   }})//2el.value = obj.value

MVVM 联动起来
prop => el
el=>prop
演示代码
留神：演示代码是 （绑定一对一）

<input type="text" v-model="value"/><input type="text" v-model="test1"/>
<script>    //mvvm    let _vm = {        value: 'tst',        test1:undefined    }    let vm = Vue(_vm)    function Vue(vm) {        const tagEventMap = {            input: 'change'        }        const tagSetterMap = {            input: 'value'        }        const attr2ElMap = {        }        // 获取 v-model        let elements = document.body.querySelectorAll('[v-model]');        // 获取 field2El        elements.forEach(el=>{            let fName = el.attributes['v-model'].value            let tagName = el.localName            attr2ElMap[fName] = {                el,                changeEvent: tagEventMap[tagName],                setValue: tagSetterMap[tagName]            }        })        let _vm = new Proxy(vm, {            get: function (obj, prop) {                return obj[prop];            },            set: function (obj, prop, value) {                let el = attr2ElMap[prop].el;                obj[prop] = value;                el[attr2ElMap[prop].setValue] = value                console.log('update:', prop, value)            }        })        // 代理 设值        Object.getOwnPropertyNames(attr2ElMap).forEach((prop) => {            let e = attr2ElMap[prop];            // init            if(_vm[prop]){                _vm[prop] = _vm[prop]            }            e.el.addEventListener(e.changeEvent, ev => {                _vm[prop] = ev.target[attr2ElMap[prop].setValue]            })        })       return _vm    }</script>

援用

什么是MVVM？
MVVM和MVC的区别，以及MVVM的毛病