Object.defineProperty(简易版)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//  Vue2的响应式原理，结合了Object.defineProperty的数据劫持，以及发布订阅者模式
//  Vue2的数据劫持，就是通过递归遍历data里的数据，用Object.defineProperty给每一个属性添加getter和setter,
//  并且把data里的属性挂载到vue实例中，修改vue实例上的属性时，就会触发对应的setter函数，向Dep订阅器发布更新消息，
//  对应的Watcher订阅者会收到通知，调用自身的回调函数，让编译器去更新视图。
   const obj = {
     name: '刘逍',
     age: 20
   }
   const p = {}
   for (let key in obj) {
     Object.defineProperty(p, key, {
       get() {
         console.log(`有人读取p里的${key}属性`);
         return obj[key]
       },
       set(val) {
         console.log(`有人修改了p里的${key}属性,值为${val},需要去更新视图`);
         obj[key] = val
       }
     })
   }