vue雙向數據綁定原理分析--Mr.Ember

時間 2019-11-20

標籤 vue 雙向數據綁定原理分析 mr.ember ember 简体版

原文原文鏈接

vue雙向數據綁定原理分析html

摘要vue

vue經常使用，但原理經常不理解，下面咱們來具體分析下vue的雙向數據綁定原理。node

（1）建立一個vue對象，實現一個數據監聽器observer，對全部數據對象屬性進行監聽, 數據發生變化時拿到最新值並通知訂閱者

（2）實現一個解析器 compile，對沒個元素節點進行掃描和解析，根據指令模板替換數據，以綁定更新函數

（3）實現一個Watcher, 做爲鏈接observer 和 compile，訂閱屬性的變更通知，執行相應的回調函數，從而更新視圖

一.簡化版雙向數據綁定app

    <div id="app">
        <input type="text" t-model="text"> 
        <p>{{text}}</p>
    </div>
    <script>var obj = {};
            Object.defineProperty(obj, 'text', {
                get: function() {
                    return obj;
                },
                set: function(newValue) {
                    console.log(newValue)
                    showText = document.getElementById('show-text');
                    document.getElementById('txt').value = newValue;
                    showText.innerHTML = newValue;
                }

            })
            document.addEventListener('keyup', function(e) {
                console.log(e)
                obj.text = e.target.value;
            })
</script>

對input監聽，把數據經過監聽keyup事件實時寫入p標籤裏dom

因爲每次都渲染一次對於頁面很是不友好，儘可能避免對DOM的直接操做，下面的方法優雅的解決了這方面的問題。函數

二. 優雅版雙向數據綁定spa

    <div id="app">
        <input type="text" id="txt">
        <p id="show-text"></p>
    </div>
    <script>
        function handleData() {
            var obj = {};
            Object.defineProperty(obj, 'text', {
                get: function() {
                    return obj;
                },
                set: function(newValue) {
                    console.log(newValue)
                    showText = document.getElementById('show-text');
                    document.getElementById('txt').value = newValue;
                    showText.innerHTML = newValue;
                }

            })
            document.addEventListener('keyup', function(e) {
                console.log(e)
                obj.text = e.target.value;
            })
        }

        function convertNode(node, vm) {
　　　　　　　　//建立空白片斷
            var fragment = document.createDocumentFragment(),child;
            console.log(vm)
            while(child = node.firstChild) {
                fragment.appendChild(child);
            }
            return fragment;
        }

        var dom = convertNode(document.getElementById('app'));
        handleData();
        document.getElementById('app').appendChild(dom);
    </script>