如何实现一个简单的MVVM 框架

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 给对象设值

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

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

//1
let vm = new Proxy(obj,{
   get function(obj, prop){}
   set function(obj, prop, value){
      // 我变动了
   }
})
//2
el.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的缺点