通過js實現資料的雙向繫結 ：
Object.defineProperty瞭解
語法：
Object.defineProperty(obj, prop, descriptor)
obj 要定義屬性的物件。
prop 要定義或修改的屬性的名稱
descriptor 要定義或修改的屬性描述符
obj和prop很好理解 比如我們定義一個變數為
const o = {
name:'xbhog'
}
其中obj指的就是o,prop指的就是o.name 下面我們主要看看descriptor
descriptor 目標物件屬性的一些特徵（是一個物件）
descriptor 下有6個引數
引數1：
value:屬性值
引數2：
writable：物件屬性值是否可以被修改 true允許 false不允許
引數3：
configurable:物件屬性是否可以被刪除 true允許 false不允許
引數4：
enumerable:物件屬性是否可被列舉
引數5：
get():是個函式，當訪問該屬性的時候，函式自動呼叫，函式返回值就是該屬性的值
引數6：
set():是個函式，當修改該屬性的時候，函式自動呼叫，函式有且只有一個引數，賦值的新值
注意：描述符裡的value屬性 writable屬性 與 get屬性 set屬性是互斥的關係，只能存在一個
瞭解了前置知識，我們來實現Vue中的v-model的雙向繫結。
先看實現程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過js實現資料的雙向繫結</title>
</head>
<body>
<input type="text"/><br>
<h1>你好：<span>更新資料</span></h1>
<!-- 通過js實現資料的雙向繫結 -->
<script>
// 方法返回文件中與指定選擇器或選擇器組匹配的第一個 HTMLElement物件
var ipt =document.querySelector('input');
var p = document.querySelector('span');
var data = {name:""};
/*
oninput 事件在使用者輸入時觸發。
該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。
*/
ipt.oninput = function(){
// 將ipt.value中的值傳給data.name的value
data.name = ipt.value;
}
//劫持ipt.value
Object.defineProperty(data,"name",{
// 資料訂閱
get(){
return ipt.value; //當訪問的時候會呼叫get方法
},
// 資料劫持
//name:value
set(value) {
p.innerHTML = value;
ipt.value = value;
}
})
</script>
</body>
</html>
首先我們通過document.querySelector獲取input以及span標籤的Html物件，在定義一個data物件，屬性name先為空。
使用事件監聽oninput來監聽使用者輸入(該事件在 <input> 或 <textarea> 元素的值發生改變時觸發)。
將ipt.value中的值傳給data.name的value；
data.name = ipt.value;
利用Object.defineProperty劫持使用者輸入的資料。
- get 屬性：是個函式，當訪問該屬性的時候，函式自動呼叫，函式返回值就是該屬性的值
- set 屬性：是個函式，當修改該屬性的時候，函式自動呼叫，函式有且只有一個引數，賦值的新值
Object.defineProperty(data,"name",{
// 資料訂閱
get(){
return ipt.value; //當訪問data.name時候會呼叫get方法，呼叫ipt.value獲取當前value的值
},
// 資料劫持
set(value) { //設定資料的時候會自動呼叫set方法
p.innerHTML = value;
ipt.value = value;
}
看效果比較明顯：
set方法：
get方法：
最後實現效果：
如果你看到這裡或者正好對你有所幫助，希望能點個關注或者推薦，感謝；
有錯誤的地方，歡迎在評論指出，作者看到會進行修改。