vue的興起源于入手簡單,對數據的雙向綁定,
以及語法的友好性.相對于react的最大優勢大概就是數據的雙向綁定了.但是你知道雙向綁定到底是如何實現的嗎?
可能你會說的Object.defineProperty()來實現的.确實沒錯 但是這隻是實現了數據的單向綁定還需要結合訂閱發布來實現.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <input type="text" id='input'> <p id='p'></p> </div> </body> </html>
先簡單的實現一個頁面輸入框
頁面顯示
在實現雙向綁定前,我們先熟悉一下Object.defineProperty()語法,MDN給出的解釋Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 并返回這個對象。
Object.defineProperty(obj, prop, descriptor) obj 要在其上定義屬性的對象。 prop 要定義或修改的屬性的名稱。 descriptor 将被定義或修改的屬性描述符。
我們現在需要好好了解一下descriptor, 屬性描述描述什麼呢? 數據的變化是否可讀寫,是否可以删除等等 是對于我們定義的obj.prop的一個描述.descriptor函數内部包含set 與 get
get當有該屬性的的時候會發生,
set當數據變動的時候發生改變默認值為undefined
擁有以上屬性的時候我們就可以開始設計了
const data = {};//定義一個對象 let _data = null//存儲數據綁定後的值 防止死循環 const input = document.getElementById('input');//獲取input框 const p = document.getElementById('p');//獲取p的行展示通過input改變的數據層 Object.defineProperty(data, 'text', { //設置定義data的對象和text屬性 set(value) { console.log(value) //當data數據層的值複制給input框 // data.text = value input.value = value _data = value }, get() { return _data } }); input.onchange = function (e) { data.text = e.target.value; p.innerHTML = data.text //将input改變視圖層的值賦值給數據層并展示出來 }
輸入input時候p标簽也改變了說明視圖層已經改變數據層
視圖層到數據層确定ok
在浏覽器中輸入改變data中的text屬性頁面的input同樣也改變了
數據層到視圖層同樣ok
vue則是通過這樣的思路去實現框架中的綁定.想深入了解的同學建議去看源碼,vue需要對對象的深層次遞歸遍曆來進行綁定.
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
