大概思路 監聽------數據劫持 ------數據改變（展示給用戶了）
大概思路 監聽------數據劫持 ------數據改變（展示給用戶了）)
新建一個html 頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2.0---數據雙向綁定基本原理（defineProperty）</title>
</head>
<body>
<div></div>
<input type="text">
</body>
</html>
<script type="text/javascript">
let obj = {};
function callBack(value) {
document.querySelector('div').innerHTML = null;
document.querySelector('div').innerHTML = value;
document.querySelector('input').value = null;
document.querySelector('input').value = value;
}
document.querySelector('input').addEventListener('input', function(e) {
obj.msg = e.target.value
})
Object.defineProperty(obj, 'msg', {
set(newValue) {
// 觸發setter給obj賦值
value = newValue
//執行劫持後的操作
callBack(value)
},
get() {
//返回獲取屬性值
return value
}
})
</script>
原創不易 如對你有用 請不要吝嗇你的點贊