詳解vue的數據binding原理

時間 2019-11-20

標籤詳解 vue 數據 binding 原理简体版

原文原文鏈接

自從angular火了之後，各類mv*框架噴涌而出，angular雖然比較火，可是他的坑仍是蠻多的，還有許多性能問題被人們吐槽。好比坑爹的髒檢查機制，數據binding是受人喜好的，髒檢查就有點…性能低下了。有時候改了一個地方，髒循環要循環屢次來保證數據是否是真的變了和是否中止變化了。這樣性能就很低了。因而人們開始鑽研新的雙向數據binding的方法。尤大的vue binding就是本人蠻喜歡的一種實現方式，本文跟隨尤大的一個例子來詳解vue的數據binding的原理。html

數據binding，通常也就是正則匹配到元素中的模板，而後代碼切換爲程序員給的data。雙向binding除了髒檢查機制，尤大用es5的defineProperty來實現的雙向數據binding，攔截了對象的set和get方法，這個就比較有效了。一樣的avalon也是此方法，用正美的話說：「我只是在var data = 1的時候攔截了’=‘「。原理都是同樣的。咱們直接上例子：（這裏跟隨尤大的腳步）（複製可用）vue

<!DOCTYPE html>
<html>
    <head>
        <title>ideal</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="test">
            <p>{{msg}}</p>
            <p>{{msg}}</p>
            <p>{{msg}}</p>
            <p>{{what}}</p>
            <p>{{hey}}</p>
        </div>
        <script>
            var bindingMark = 'data-element-binding'
            function Element (id, initData) {
                var self     = this,
                    el          = self.el = document.getElementById(id)
                    bindings = {} //內部暫存綁定數據及dom
                    data      = self.data = {} //存儲bingding數據並實現監控
                    content  = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)
                    el.innerHTML = content
                 
                for (var variable in bindings) {
                    bind(variable); //將每一個數據的名稱好比'msg'綁定到data
                }
                if (initData) {
                    for (var variable in initData) {
                        data[variable] = initData[variable]
                    }
                }
                function markToken (match, variable) {
                    bindings[variable] = {} //bindings裏存儲了數據來源的字段好比bindings['msg']
                    return '<span ' + bindingMark + '="' + variable +'"></span>'
                }
                function bind (variable) {
                    bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]')//bindings裏再存儲msg綁定的元素
                    ;[].forEach.call(bindings[variable].els, function (e) { //刪除data-element-binding屬性
                        e.removeAttribute(bindingMark)
                    })
                    Object.defineProperty(data, variable, { //es5觀察屬性
                        set: function (newVal) {
                            [].forEach.call(bindings[variable].els, function (e) {
                                bindings[variable].value = e.textContent = newVal //=>這裏纔是實現的綁定,更新數據到dom並更新內部暫存數據
                            })
                        },
                        get: function () {
                            return bindings[variable].value  //取數據僅僅是內部暫存的數據
                        }
                    })
                }
            }
            
            var app = new Element('test', {
                msg: 'hello',
                what: 'hi'
            })

        </script>
    </body>
</html>

這應該就是vue數據binding的原理了。一些地方都寫在註釋了。git

這個數據binding的流程是怎樣的？程序員

開始弄一個屬性佔位符data-element-binding，正則把原元素的內容加個標籤再加上此屬性，屬性的值是綁定的值的key，好比msg是hello，則data-element-binding=」msg「，同時在匹配的時候把這個key存到bindings對象裏面，bindings暫存綁定數據。github

遍歷bindings對象，再把每一個存在data-element-binding的元素以它的key（好比msg）存到bindings裏面，而後刪除dom中的data-element-binding屬性。app

最重要的是：它維護了一個data對象，這個data對象是binding的關鍵，他是m和v的接口。他循環定義屬性key（好比msg），而後在set的時候更新dom的數據，完成的binding，也就是劫持了」=「的操做，而且把這個值存到bindings裏暫存。set的時候返回的是bindings裏面的暫存數據。這樣的好處就是我始終是使用js的原生方法，我改變data就會實現雙向的綁定。v=>m的binding只須要一個onchange事件就能夠，避免了循環的檢查。框架

vue的單項綁定就是這樣了，有趣的地方是你在控制檯修改data的屬性，p標籤的內容也會相應改變，這正是es5 set方法的特色，這樣的雙向綁定是好維護而且沒有反作用的，並且性能仍是很強大的。dom

那見識過vue的數據綁定之後咱們實現一個input的雙向數據綁定（跟源碼不同的說）ide

其實input的雙向binding很簡單，由於vue已經幫咱們作好了data屬性，那麼我在操做data的時候實際上已經完成了m到v的雙向綁定。那麼原理很簡單，onkey的時候就修改data數據就行了。先上代碼：（複製可用）性能

<!DOCTYPE html>
<html>
    <head>
        <title>ideal</title>
        <meta charset="utf-8">
    </head>
    <body>
        <input class="test" type="text" name="asd" onkeyup ="handleChange()" v-model="hey">
        <input class="test" type="" name="" onkeyup ="handleChange()" v-model="msg">
        <script>
            var bindingMark = 'data-element-binding'
            function Element (classa, initData) {
                var self     = this,
                    el          = self.el = document.getElementsByClassName(classa),//多個input改成class
                    bindings = {} 
                    data      = self.data = {} 
                    for (var i = 0; i < el.length; i++) {
                        content  = el[i].outerHTML.replace(/v-model=\"(.*)\"/g, markToken);
                        el[i].outerHTML = content
                    }
                for (var variable in bindings) {
                    bind(variable); 
                }
                if (initData) {
                    for (var variable in initData) {
                        data[variable] = initData[variable]
                    }
                }
                function markToken (match, variable) {
                    bindings[variable] = {} 
                    return  bindingMark + '="' + variable +'"' //內填一個span變爲只改它的元素
                }
                function bind (variable) {

                    bindings[variable].els = document.querySelectorAll('[' + bindingMark + '="' + variable + '"]')//document獲取binding元素
                    ;
                    Object.defineProperty(data, variable, { 
                        set: function (newVal) {
                            [].forEach.call(bindings[variable].els, function (e) {
                                bindings[variable].value = e.value = newVal //=>textContent改成input的value
                            })
                        },
                        get: function () {
                            return bindings[variable].value 
                        }
                    })
                }
            }
            
            var app = new Element('test', {
                msg: 'hello',
                hey:'aaa'
            })
            function handleChange(e){ //增長v=>m的綁定
                e = e || window.event
                var key = e.target.outerHTML.match(/data-element-binding=\"(.*)\"/)[1];
                data[key] = e.target.value
                console.log(data.hey,data.msg);
            }
        </script>
    </body>
</html>