<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1.自动生成get和set好处
1.可以永远给下一层级找到get和set
2.更加简洁(自己写的get和set，修改值比较麻烦：vm.__data.name='修改')vm自己的（vm.name='修改'）
-->
<script src="./vue.js"></script>
</head>
<body>
<!-- <h1>{{name}}</h1>
<h2>{{address}}</h2> -->
<script type="text/javascript">
let data = {
name:'尚硅谷',
address:'北京'
}
//创建一个监视的实例对象，用于监视data中属性变化
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}被改了，去解析模板，生成虚拟dom`)
obj[k] = val
}
})
})
}
</script>
</body>
</html>
