當把一個普通的JavaScript物件傳給Vue實體的data選項，Vue將遍歷此物件所有的屬性，使用Object.defineProperty(Vue2.x) – (vue3->proxy) 把這些屬性全部轉為 **getter/setter(資料劫持或資料映射)，**在屬性被訪問和修改時通知變化，每個組件實體都有相應的 watcher 實體物件，它會在組件渲染的程序中把屬性記錄為依賴，之后當依賴項的 setter 被呼叫時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新，
<body>
<div id="app">
<div id="msg"></div>
<input type="text" name="" id="" oninput="changeVal(this)" />
</div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
// 1. 定義物件
var userInfo = {
name: "這個資訊雖然用戶看不到，但是Vue可以追蹤到",
};
// 2. 資料劫持
var obj = {};
Object.defineProperty(obj, "name", {
get() {
return userInfo.name;
},
set(data) {
userInfo.name = data;
document.getElementById("msg").innerHTML = data;
return true;
},
});
// 3. 實時渲染
document.getElementById("msg").innerHTML = obj.name;
// 4. 訂閱
function changeVal(eleObj) {
let value = eleObj.value;
obj.name = value;
return true;
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/224026.html
標籤：其他
上一篇：Mybatis或Mybatis-Plus框架的xml檔案中特殊符號的使用（＜、＜= 、＞、 ＞=、&、‘、“ ）