快捷導(dǎo)航

詳細(xì)聊聊Vue.js中的MVVM

更新時(shí)間：2022年03月03日 15:47:17 作者：慕晨同學(xué)

MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開發(fā)與模式其余部分的分離,這篇文章主要給大家介紹了關(guān)于Vue.js中MVVM的相關(guān)資料,需要的朋友可以參考下

MVVM的理解

MVVM拆開來即為Model-View-ViewModel，有View，ViewModel，Model三部分組成。View層代表的是視圖、模版，負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化為UI展現(xiàn)出來。Model層代表的是模型、數(shù)據(jù)，可以在Model層中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。ViewModel層連接Model和View。

在MVVM的架構(gòu)下，View層和Model層并沒有直接聯(lián)系，而是通過ViewModel層進(jìn)行交互。ViewModel層通過雙向數(shù)據(jù)綁定將View層和Model層連接了起來，使得View層和Model層的同步工作完全是自動(dòng)的。因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，無需手動(dòng)操作DOM，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)交給MVVM統(tǒng)一來管理。在Vue.js中MVVM的體現(xiàn)：

MVVM的原理

在不同的框架當(dāng)中，MVVM實(shí)現(xiàn)的原理是不同的：

臟檢查機(jī)制：

Angular.js就是采取的臟檢查機(jī)制，當(dāng)發(fā)生了某種事件（例如輸入），Angular.js會(huì)檢查新的數(shù)據(jù)結(jié)構(gòu)和之前的數(shù)據(jù)結(jié)構(gòu)是否發(fā)生來變動(dòng)，來決定是否更新視圖。

數(shù)據(jù)劫持

Vue.js的實(shí)現(xiàn)方式，對(duì)數(shù)據(jù)（Model）進(jìn)行劫持，當(dāng)數(shù)據(jù)變動(dòng)時(shí)，數(shù)據(jù)會(huì)出發(fā)劫持時(shí)綁定的方法，對(duì)視圖進(jìn)行更新。

相同點(diǎn)

臟檢查機(jī)制和數(shù)據(jù)劫持是有許多相同點(diǎn)的，例如，它們都有三個(gè)步驟：

解析模版
解析數(shù)據(jù)
綁定模版與數(shù)據(jù)

實(shí)現(xiàn)MVVM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Two-way data-binding</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="text">
        {{ text }}
    </div>
    <script>
        function observe (obj, vm) {
            Object.keys(obj).forEach(function (key) {
                defineReactive(vm, key, obj[key]);
            });
        }
        function defineReactive (obj, key, val) {
            var dep = new Dep();
            Object.defineProperty(obj, key, {
                get: function () {
                    if (Dep.target) dep.addSub(Dep.target);
                    return val
                },
                set: function (newVal) {
                    if (newVal === val) return
                    val = newVal;
                    dep.notify();
                }
            });
        }
        function nodeToFragment (node, vm) {
            var flag = document.createDocumentFragment();
            var child;
            while (child = node.firstChild) {
                compile(child, vm);
                flag.appendChild(child);
            }
            return flag;
        }
        function compile (node, vm) {
            var reg = /\{\{(.*)\}\}/;
            // 節(jié)點(diǎn)類型為元素
            if (node.nodeType === 1) {
                var attr = node.attributes;
                // 解析屬性
                for (var i = 0; i < attr.length; i++) {
                    if (attr[i].nodeName == 'v-model') {
                        var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
                        node.addEventListener('input', function (e) {
                            // 給相應(yīng)的data屬性賦值，進(jìn)而觸發(fā)該屬性的set方法
                            vm[name] = e.target.value;
                        });
                        node.value = vm[name]; // 將data的值賦給該node
                        node.removeAttribute('v-model');
                    }
                }
                new Watcher(vm, node, name, 'input');
            }
            // 節(jié)點(diǎn)類型為text
            if (node.nodeType === 3) {
                if (reg.test(node.nodeValue)) {
                    var name = RegExp.$1; // 獲取匹配到的字符串
                    name = name.trim();
                    new Watcher(vm, node, name, 'text');
                }
            }
        }
    
        function Watcher (vm, node, name, nodeType) {
        //  this為watcher函數(shù)
            Dep.target = this;
        //  console.log(this);
            this.name = name;
            this.node = node;
            this.vm = vm;
            this.nodeType = nodeType;
            this.update();
            Dep.target = null;
        }
        Watcher.prototype = {
            update: function () {
                this.get();
                if (this.nodeType == 'text') {
                    this.node.nodeValue = this.value;
                }
                if (this.nodeType == 'input') {
                    this.node.value = this.value;
                }
            },
            // 獲取daa中的屬性值
            get: function () {
                this.value = this.vm[this.name]; // 觸發(fā)相應(yīng)屬性的get
            }
        }
        function Dep () {
            this.subs = []
        }
        Dep.prototype = {
            addSub: function(sub) {
                this.subs.push(sub);
            },
            notify: function() {
                this.subs.forEach(function(sub) {
                    sub.update();
                });
            }
        };
        function Vue (options) {
            this.data = options.data;
            var data = this.data;
            observe(data, this);
            var id = options.el;
            var dom = nodeToFragment(document.getElementById(id), this);
            // 編譯完成后，將dom返回到app中
            document.getElementById(id).appendChild(dom);
        }
        var vm = new Vue({
            el: 'app',
            data: {
                text: 'hello world'
            }
        });
    </script>
</body>
</html>