vue雙向數據綁定原理分析

摘要

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

（1）創建一個vue對象，實現一個數據監聽器observer，對所有數據對象屬性進行監聽, 數據發生變化時拿到最新值并通知訂閱者 （2）實現一個解析器 compile，對沒個元素節點進行掃描和解析，根據指令模板替換數據，以綁定更新函數 （3）實現一個Watcher, 作為連接observer 和 compile，訂閱屬性的變動通知，執行相應的回調函數，從而更新視圖

一.簡化版雙向數據綁定

<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的直接操作，下面的方法優雅的解決了這方面的問題。

?

二. 優雅版雙向數據綁定

<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>

使用DocumentFragment代替直接操作DOM。

下一講終極版雙向數據綁定

轉載于:https://www.cnblogs.com/teteWang-Ember/p/9991967.html

總結

以上是生活随笔為你收集整理的vue双向数据绑定原理分析--Mr.Ember的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。