欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳細聊聊Vue.js中的MVVM

 更新時間:2022年03月03日 15:47:17   作者:慕晨同學  
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過從視圖層中幾乎刪除所有GUI代碼(代碼隱藏),更好地促進視圖層開發(fā)與模式其余部分的分離,這篇文章主要給大家介紹了關(guān)于Vue.js中MVVM的相關(guān)資料,需要的朋友可以參考下

MVVM的理解

MVVM拆開來即為Model-View-ViewModel,有View,ViewModel,Model三部分組成。View層代表的是視圖、模版,負責將數(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層進行交互。ViewModel層通過雙向數(shù)據(jù)綁定將View層和Model層連接了起來,使得View層和Model層的同步工作完全是自動的。因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯,無需手動操作DOM,復雜的數(shù)據(jù)狀態(tài)維護交給MVVM統(tǒng)一來管理。在Vue.js中MVVM的體現(xiàn):

MVVM的原理

在不同的框架當中,MVVM實現(xiàn)的原理是不同的:

臟檢查機制:

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

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

Vue.js的實現(xiàn)方式,對數(shù)據(jù)(Model)進行劫持,當數(shù)據(jù)變動時,數(shù)據(jù)會出發(fā)劫持時綁定的方法,對視圖進行更新。

相同點

臟檢查機制和數(shù)據(jù)劫持是有許多相同點的,例如,它們都有三個步驟:

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

實現(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é)點類型為元素
            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屬性賦值,進而觸發(fā)該屬性的set方法
                            vm[name] = e.target.value;
                        });
                        node.value = vm[name]; // 將data的值賦給該node
                        node.removeAttribute('v-model');
                    }
                }
                new Watcher(vm, node, name, 'input');
            }
            // 節(jié)點類型為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>

總結(jié)

到此這篇關(guān)于Vue.js中MVVM的文章就介紹到這了,更多相關(guān)Vue.js中MVVM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue引用BootStrap以及引用bootStrap-vue.js問題

    vue引用BootStrap以及引用bootStrap-vue.js問題

    這篇文章主要介紹了vue引用BootStrap以及引用bootStrap-vue.js問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 詳解hooks在vue3中的使用方法及示例

    詳解hooks在vue3中的使用方法及示例

    hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下
    2023-09-09
  • Vue?中駝峰命名與短橫線分割命名的用法及區(qū)別

    Vue?中駝峰命名與短橫線分割命名的用法及區(qū)別

    在?Vue?中,命名規(guī)范是一個非常重要的話題,駝峰命名和短橫線分割命名都有其各自的優(yōu)缺點和適用場景,開發(fā)者需要根據(jù)實際情況進行選擇,這篇文章主要介紹了Vue?中駝峰命名與短橫線分割命名作用及區(qū)別介紹,需要的朋友可以參考下
    2023-05-05
  • 使用VitePress搭建及部署vue組件庫文檔的示例詳解

    使用VitePress搭建及部署vue組件庫文檔的示例詳解

    這篇文章主要介紹了使用VitePress搭建及部署vue組件庫文檔,本文以element-plus作為示例來搭建一個文檔,結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • vue自定義氣泡彈窗

    vue自定義氣泡彈窗

    這篇文章主要為大家詳細介紹了vue自定義氣泡彈窗,包含css晃動動畫shake制作,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • c++游戲教程使用easyx做出大飛機

    c++游戲教程使用easyx做出大飛機

    這篇文章主要為大家介紹了c++游戲教程使用easyx實現(xiàn)大飛機示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • Vue3?實現(xiàn)驗證碼倒計時功能

    Vue3?實現(xiàn)驗證碼倒計時功能

    這篇文章主要介紹了Vue3?實現(xiàn)驗證碼倒計時功能,倒計時的運用場景是獲取手機驗證碼倒計時、獲取郵箱驗證碼倒計時等場景,本文結(jié)合示例代碼給大家詳細講解,需要的朋友可以參考下
    2023-01-01
  • vue里的data要用return返回的原因淺析

    vue里的data要用return返回的原因淺析

    這篇文章主要介紹了vue里的data要用return返回的原因淺析,需要的朋友可以參考下
    2019-05-05
  • vue 使用 canvas 實現(xiàn)手寫電子簽名

    vue 使用 canvas 實現(xiàn)手寫電子簽名

    這篇文章主要介紹了vue 使用 canvas 實現(xiàn)手寫電子簽名功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-03
  • Vue中子組件的顯示與隱藏方式

    Vue中子組件的顯示與隱藏方式

    這篇文章主要介紹了Vue中子組件的顯示與隱藏方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論