1.首先我們先了解下實現Vue雙向綁定的核心方法Object.defineProperty(obj, prop, descriptor)
obj: 目標對象；
prop: 目標對象屬性的名稱；
descriptor: 目標對象屬性的描述符；
該方法的詳細解釋請移步這裏。
2.廢話不多說，上代碼我們來實現：
該demo每當我們修改input值後，h1標題都會隨之改變
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue雙向綁定原理</title>
</head>
<body>
<div id="app">
<h1 id="title">vue雙向綁定原理</h1>
<input id="input" type="text" onchange="handle()">
</div>
</body>
<script>
var view = title;
var model = { title: "" };
function handle() {
const newVal = input.value;
model.title = newVal
}
//調用該方法後，每次我們獲取model.title時，都會調用get鉤子函數；每當我 們修改model.title時，都會調用set鉤子函數
reactiveMVVM(model, "title", model.title)
function reactiveMVVM(obj, key, val) {
Object.defineProperty(obj, key, {
get: function reactiveGetter () {
return val
},
set: function reactiveSetter (newVal) {
val = newVal;
view.innerText = val;
}
});
}
</script>
</html>
3.最後附上vue源碼實現的代碼
