首先我们先看看vue的基本框架
数据代理就是当你在vue实例里面定义了一些data的属性，在VM模型对象中，他会接收data中的属性，并在自己里面形成一个_data的东西里面主要是有你data里面的属性，并且有响应的get与set方法。这就是数据代理。数据代理底层主要是运用了Object.definProperty这个方法,数据代理就是我们改的是data里面的值，当代理到_tada里面 然后页面就重新解析，重新进行绑定。
这个方法的作用是 为指定对象添加属性
Object.Property（Object，key）{ //这里object指的是传入的对象，key是你要创建或者定义的字段
get(){};//当值读取时会执行这个方法
set(){};//当值改变时会执行这个方法
}请简单写一个数据监听的小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟一个数据监测的damo</title>
</head>
<body>
<script type="text/javascript">
let data={
name:'yyy',
address:'bbb'
}
//创建一个监视的实例
const obs=new Observer(data);
console.log(obs);
//准备一个vm实例
let vm ={}
vm._data=data=obs;
function Observer(obj){
//汇总对象中的属性成为一个数组
const keys =Object.keys(obj)
//遍历
keys.forEach((k)=>{
Object.defineProperty(this,k,{
get(){
return obj[k]
},
set(val){
console.log(`${k}被改了，我要去解析模板。`)
obj[k]=val
}
})
})
}
</script>
</body>
</html>数据监听就是当我们改变了_data 里面属性对应的值时，会引起vue从新去解析页面。而数据代理则是我们改变了data里面的东西引起了_data里面的数据也会自动的改变。