关于vue.js:如何实现一个简单的MVVM-框架

1次阅读

共计 1696 个字符，预计需要花费 5 分钟才能阅读完成。

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

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

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

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

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

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

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

页面变动如何告诉对象
分成两步，
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 的毛病

正文完