1 <body> 2 <script src="./Dvue.js"></script> 3 <script> 4 const app = new DVue({ 5 data: { 6 test: "I am test", 7 foo: { 8 bar: "bar" 9 } 10 } 11 }) 12 13 app.$data.test = "hello world!" // 属性更新了：hello kaikeba! 14 // app.$data.foo.bar = "hello!" 15 </script> 16 </body>
Dvue.js
1 class DVue { 2 constructor(options) { 3 this.$options = options 4 5 // 数据响应化 6 this.$data = options.data 7 this.observe(this.$data) 8 } 9 10 observe(value) { 11 // 判断value是否是对象 12 if (!value || typeof value !== 'object') { 13 return 14 } 15 16 // 遍历该对象 17 Object.keys(value).forEach(key => { 18 this.defineReactive(value, key, value[key]) 19 }) 20 } 21 22 // 数据响应化 23 defineReactive(obj, key, val) { 24 // 判断val内是否还可以继续调用(是否还有对象) 25 this.observe(val) // 递归解决数据嵌套 26 27 Object.defineProperty(obj, key, { 28 get() { 29 // 读取的时候 判断Dep.target是否有，如果有则调用addDep方法将Dep.target添加到deps数组上 30 return val 31 }, 32 set(newVal) { 33 // 判断数据更新前后是否一样 34 if (newVal === val) { 35 return; 36 } 37 val = newVal 38 console.log(`${key}属性更新了：${val}`) 39 } 40 }) 41 } 42 }