原理

数据劫持最基本的原理就是通过遍历为对象的每个属性都添加 getter，setter。

实现

更新器

当数据发生变化时会调用 updater。

  1. function updater(){
  2.     console.log('更新视图')
  3. }

遍历属性并添加监听

  1. const data = {
  2.     name: 'rj',
  3.     age: 18,
  4.     address: {
  5.         location: '回龙观'
  6.     }
  7. }
  9. function observer(obj) {
  10.     if (typeof obj !== 'object') return obj;
  11.     for (let key in obj) {
  12.         if (obj.hasOwnProperty(key)) {
  13.             defineReactive(obj, key, obj[key])
  14.         }
  15.     }
  16. }
  18. function defineReactive(obj, key, value) { //value是个闭包
  19.       //递归
  20.     observer(value);
  21.     Object.defineProperty(obj, [key], {
  22.         get() {
  23.             return value;
  24.         },
  25.         set(newValue) {
  26.             if(value !== newValue){
  27.                 updater(value, newValue);
  28.                   //如果新值也是对象，也需要添加监听
  29.                 observer(newValue);
  30.                 value = newValue;
  31.             }
  32.         }
  33.     })
  34. }
  35. observer(data);
  36. console.log(data.name, data.age); //rj 18
  38. data.name = 'cj';
  39. data.address.location = '山里';
  40. data.address = {location:'天上'}
  41. //如果不给新赋值添加监听，此处则不会触发更新，即29行
  42. data.address.location = '人间';
  44. /*
  45.   rj cj
  46.   开始更新
  47.   回龙观 山里
  48.   开始更新
  49.   { location: [Getter/Setter] } { location: '天上' }
  50.   开始更新
  51.   天上 人间
  52.   开始更新
  53. */