vue雙向繫結原理（簡單實現原理附demo）
阿新 • • 發佈：2018-12-09
先上效果圖
簡單的實現資料的雙向繫結首先來了解一個東西：Object.defineProperty()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty這裡是MDN對這個的詳細說明簡單點說：
這個方法可以修改現有物件屬性的值
Object.defineProperty(obj, prop, descriptor)
引數說明：
obj：定義屬性的物件
prop：修改的屬性
descriptor:修改的屬性描述符
這邊只挑最簡單的說，
get:
官方：一個給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。當訪問該屬性時，該方法會被執行，方法執行時沒有引數傳入，但是會傳入this物件（由於繼承關係，這裡的this並不一定是定義該屬性的物件）。預設為 undefined。
**簡單的說：當你需要取物件的屬性值時，就是來呼叫這個函式，取到值的**
set：
官方：一個給屬性提供 setter 的方法，如果沒有 setter 則為 undefined。當屬性值修改時，觸發執行該方法。該方法將接受唯一引數，即該屬性新的引數值。預設為 undefined。 **簡單的說：當你需要設定（改變）物件的屬性值時，就是來呼叫這個函式，達到修改的**
接下來上程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div id="aa"></div> <div> <input type="text" oninput="changedata(this.value)"> </div> <script> var data = {}; var dom_aa = document.getElementById("aa") function changedata(value){ data.a = value } //直接使用Object.defineProperty裡面的set方法進行檢視改變 Object.defineProperty(data,"a",{ set:function(newValue){ dom_aa.innerHTML = newValue; }, get:function(){ return a; } }) </script> </body> </html>
這段程式碼拷貝直接執行