当把一个普通的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>