Description: When passing an ordinary JavaScript object to the data option of a Vue instance, Vue will traverse all the properties of this object and use Object.defineProperty to convert all these properties to getter/setter (data hijacking/data mapping). Notify changes when properties are accessed and modified. Each component instance has a corresponding watcher instance object, which will record the attribute as a dependency during the component rendering process, and then when the setter of the dependency is called, it will notify the watcher to recalculate, so that its associated component can be updated .
Object.defineProperty(obj,prop,descriptor)
obj: the object whose properties are to be defined
prop: the name of the property to be defined or modified
descriptor: To define options
<body><divid="app"><divid="msg"></div><inputtype="text"oninput="changeVal(this)"></div></body><scriptsrc="./node_modules/vue/dist/vue.js"></script><script>// 1.定义对象let userInfo ={
name:"这个信息虽然用户看不到，但是vue可以追踪到",}// 2.数据劫持let obj ={
}//要定义属性的对象，要定义或修改的属性的名称，要定义选项
Object.defineProperty(obj,"name",{
get(){
return userInfo.name
},set(data){
userInfo.name = data
document.getElementById("msg").innerHTML = data
returntrue}})// 3.实时渲染
document.getElementById("msg").innerHTML = obj.name
// 4.发布订阅functionchangeVal(eleObj){
let value = eleObj.value
obj.name = value
returntrue}</script>