<!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>