通過v-model實現(xiàn)雙向數(shù)據(jù)綁,其原理是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和設(shè)置屬性值(set)的操作來實現(xiàn)的。
Object.defineProperty(obj, prop, descriptor) ，這個語法內(nèi)有三個參數(shù)，分別為 obj （要定義其上屬性的對象） prop （要定義或修改的屬性） descriptor （具體的改變方法）
例子代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue中v-model雙向數(shù)據(jù)綁定實現(xiàn)原理</title>
</head>
<body>
<div>
<input type="text" id="ins" />
<span id="b"></span>
</div>
<script>
let obj = {};
let nameValue = "";
Object.defineProperty(obj, "name", {
set(value) {
// ins.value = nameValue = value;
nameValue = value;
ins.value = value;
// document.getElementById('ins').value = val;//讓文本框的內(nèi)容等于val
document.getElementById('b').innerHTML = nameValue;//讓span的內(nèi)容等于val
},
get() {
return nameValue;
}
})
// 雙向綁定：其實描述的就是視圖和數(shù)據(jù)的關(guān)系，視圖的變化會同步更新數(shù)據(jù)，數(shù)據(jù)變化也會同步更新視圖
// 1. 視圖中用戶輸入數(shù)據(jù)的時候，我們需要獲取到用戶的輸入，然后賦值給obj.name
// 1.1 注冊事件
let ins = document.querySelector("#ins");
ins.oninput = function () {
// 1.2 獲取用戶的輸入
// 1.3 賦值給obj.name
obj.name = this.value;
console.log(obj.name)
};
// 2. 數(shù)據(jù)在發(fā)生改變的時候，我們需要把數(shù)據(jù)賦值給input框
// 當(dāng)用戶通過=給obj.name賦值的時候，會觸發(fā)上面的set方法
// 我們只需要在set方法中，把當(dāng)前的更新的數(shù)據(jù)，賦值給input框即可
// obj.name = "123";
</script>
</body>
</html>
