Vue----数据响应原理 

 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 }
posted @ 2020-01-02 13:59  林中有风  阅读(212)  评论(0)  编辑  收藏  举报