<!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>
标签:set,obj,get,keys,vm,data,模拟 From: https://www.cnblogs.com/wsx123/p/16964499.html