vue雙向數(shù)據(jù)綁定原理分析

摘要

vue常用，但原理常常不理解，下面我們來(lái)具體分析下vue的雙向數(shù)據(jù)綁定原理。

（1）創(chuàng)建一個(gè)vue對(duì)象，實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽器observer，對(duì)所有數(shù)據(jù)對(duì)象屬性進(jìn)行監(jiān)聽, 數(shù)據(jù)發(fā)生變化時(shí)拿到最新值并通知訂閱者 （2）實(shí)現(xiàn)一個(gè)解析器 compile，對(duì)沒個(gè)元素節(jié)點(diǎn)進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以綁定更新函數(shù) （3）實(shí)現(xiàn)一個(gè)Watcher, 作為連接observer 和 compile，訂閱屬性的變動(dòng)通知，執(zhí)行相應(yīng)的回調(diào)函數(shù)，從而更新視圖

一.簡(jiǎn)化版雙向數(shù)據(jù)綁定

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

對(duì)input監(jiān)聽，把數(shù)據(jù)通過監(jiān)聽keyup事件實(shí)時(shí)寫入p標(biāo)簽里

由于每次都渲染一次對(duì)于頁(yè)面非常不友好，盡量避免對(duì)DOM的直接操作，下面的方法優(yōu)雅的解決了這方面的問題。

?

二. 優(yōu)雅版雙向數(shù)據(jù)綁定

<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) {
　　　　　　　　//創(chuàng)建空白片段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。

下一講終極版雙向數(shù)據(jù)綁定

轉(zhuǎn)載于:https://www.cnblogs.com/teteWang-Ember/p/9991967.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。