Descripción: Al pasar un objeto JavaScript ordinario a la opción de datos de una instancia de Vue, Vue recorrerá todas las propiedades de este objeto y usará Object.defineProperty para convertir todas estas propiedades en getter / setter (secuestro de datos / mapeo de datos). Notificar cambios cuando se accede a las propiedades y se modifican. Cada instancia de componente tiene un objeto de instancia de observador correspondiente, que registrará la propiedad como una dependencia durante el proceso de representación del componente, y luego, cuando se llame al definidor de la dependencia, notificará al observador que vuelva a calcular, de modo que su componente asociado pueda ser actualizado.
Object.defineProperty (obj, prop, descriptor)
obj: el objeto cuyas propiedades se van a definir
prop: el nombre de la propiedad a definir o modificar
descriptor: Para definir opciones
<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>