Vue雙向數據綁定的原理與實踐

時間 2021-08-13

標籤 html vue json 數組異步 this 編碼雙向綁定 code htm 欄目 HTML 简体版

原文原文鏈接

一、Vue雙向數據綁定的原理

說到Vue的雙向數據綁定，就得提到一種方法，就是數據劫持；Vue就是經過數據劫持，結合發佈者-訂閱者模式實現的，而此方法實現的核心離不開js中對象的一個方法，即：html

Object.defineProperty(data,'name',{})
//data爲要操做的對象
//name對應監聽的具體屬性名稱
//第三個參數未對應屬性的描述，及具體怎麼樣操做對象數據

Object.defineProperty方法用來監聽對象中數據的變化，該方法有三個參數，第一個參數爲要操做的對象，第二個爲要監聽對象屬性的名稱，第三個爲屬性描述，對應的是個json對象，在裏邊能夠設置get和set方法，當調用屬性值或者改變屬性值會被get和set方法捕獲到，以此進行相關操做。在Vue中，當給Vue對象設置data後，Vue會遍歷data對象中的全部屬性值，使用Object.defineProperty()方法設置get和set方法，以此實現數據的雙向綁定。vue

二、寫一段程序模擬Vue的雙向數據綁定

<html>
    <body>
        <input id='enterEl' type='text'>
        <div id='showEl'></div>
        <script>
            let data = {inputValue:'hh'}
            Object.defineProperty(data,'inputValue',{
                get: function(){
                    return data;
                },
                set: function(newData){
                    document.getElementById('enterEl').value = newData;
                    document.getElementById('showEl').innerHTML = newData;
                }
            })
            document.getElementById('enterEl').addEventListener('keyup',function(){
                data.inputValue = this.value;
            })
        </script>
    </body>
</html>

三、Vue中不會進行視圖刷新的三種狀況

3.1 由於Vue進行響應式變化的是對象，不能是數組，可是某個對象是數值這樣也是能夠的，這也說明了Vue中data最外層必須是一個對象的緣由，另外若是對象中的屬性又是對象，則Vue會一層層的遞歸解析出來，進行相應式處理。當數組中的數據經過push、contact等js指令中進行處理會出現一個新的數組，所以這樣處理後，會進行視圖刷新的。可是若是進行list[i]=newValue這樣的處理時，Vue並不會進行數據的刷新與視圖渲染，這根本質上Object.defineProperty()方法接收的就是對象有關係，一樣的當改變list.length=newValue也不會進行處理。
3.2 再就是原先data中沒有的屬性，也就是本身添加的屬性並無在data中，這樣的狀況也不能進行響應式操做的，能夠利用Vue.set方法進行添加，這個能夠自行調研一下。
3.3 由於Vue中UI的渲染是經過異步進行的，因此有些操做直接進行，DOM中尚未新數據，致使調用代碼時尚未數據，所以沒有進行刷新，這樣的狀況時，能夠在調用數據更新以後的代碼，等待Vue完成DOM的更新後再獲取此節點，代碼中用Vue.nextTick(callback)包裹起來，在callback中進行編碼，例如

<script>
    //...
	this.message = 'new Data'
        console.log(this.$el.textContent) //    仍是原來的消息
        this.$nextTick(function(){
		console.log(this.$el.textContent) // UI刷新了最新的消息
     })
    //...
</script>