Detailed explanation of the complete guide example

(obj, prop, descriptor)

const obj = {};
(obj, 'name', {
  value: 'John',          // Attribute value  writable: true,         // Is it possible to write  enumerable: true,       // Is it enumerable  configurable: true      // Is it configurable});

const obj = {
  _name: 'John'
};
(obj, 'name', {
  get() {
    return this._name;
  },
  set(value) {
    this._name = value;
  },
  enumerable: true,
  configurable: true
});

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return;
  }
  (obj).forEach(key => {
    defineReactive(obj, key, obj[key]);
  });
}
function defineReactive(obj, key, val) {
  // Recursively process nested objects  observe(val);
  (obj, key, {
    get() {
      (`Get${key}property`);
      return val;
    },
    set(newVal) {
      if (val === newVal) return;
      (`set up${key}property为${newVal}`);
      val = newVal;
      // Trigger update    }
  });
}
// Use exampleconst data = {
  name: 'John',
  age: 20
};
observe(data);
 = 'Mike'; // Set the name attribute to Mike(); // Getnameproperty Mike

function Person(name) {
  let _name = name;
  (this, 'name', {
    get() {
      return _name;
    },
    set(value) {
      if (typeof value !== 'string') {
        throw new Error('Name must be a string');
      }
      _name = value;
    }
  });
}
const person = new Person('John');
(); // John
 = 'Mike'; // Normal settings = 123; // Throw an error

function computed(obj, key, computeFunc) {
  let value = computeFunc();
  (obj, key, {
    get() {
      return value;
    },
    set() {
      (`${key} is a computed property, cannot be modified`);
    }
  });
}
const obj = {
  a: 1,
  b: 2
};
computed(obj, 'sum', () =>  + );
(); // 3
 = 10; // warn：sum is a computed property, cannot be modified

const obj = {};
(obj);
// This will throw an error(obj, 'name', {
  value: 'John'
});

const parent = {};
(parent, 'name', {
  value: 'John',
  writable: false
});
const child = (parent);
// This will throw an error = 'Mike';

const obj = {};
// Cannot specify value/writable and get/set at the same time(obj, 'name', {
  value: 'John',
  get() {
    return 'John';
  }
}); // Throw an error

// Not recommendedconst obj = {};
for (let i = 0; i < 1000; i++) {
  (obj, `prop${i}`, {
    value: i,
    writable: true
  });
}
// recommendconst descriptors = {};
for (let i = 0; i < 1000; i++) {
  descriptors[`prop${i}`] = {
    value: i,
    writable: true,
    configurable: true,
    enumerable: true
  };
}
(obj, descriptors);

// Avoid complex calculations in the accessor(obj, 'name', {
  get() {
    // Not recommended    return complexCalculation();
  }
});
// Recommended: cache calculation resultslet cachedValue;
(obj, 'name', {
  get() {
    if (cachedValue === undefined) {
      cachedValue = complexCalculation();
    }
    return cachedValue;
  }
});

// Remember that the default values ​​are false(obj, 'name', {
  value: 'John'
  // writable: false
  // enumerable: false
  // configurable: false
});

interface PropertyDescriptor {
  configurable?: boolean;
  enumerable?: boolean;
  value?: any;
  writable?: boolean;
  get?(): any;
  set?(v: any): void;
}

function safeDefineProperty(obj, prop, descriptor) {
  try {
    (obj, prop, descriptor);
    return true;
  } catch (error) {
    (`Failed to define property ${prop}:`, error);
    return false;
  }
}

// Basic syntax(obj, prop, descriptor)
// Parameter description// obj: The object to define the attribute// prop: The attribute name to define or modify// descriptor: Attribute descriptor object

const obj = {};
(obj, 'name', {
  value: 'John',          // Attribute value  writable: true,         // Is it possible to write  enumerable: true,       // Is it enumerable  configurable: true      // Is it configurable});

const obj = {
  _name: 'John'
};
(obj, 'name', {
  get() {
    ('Getting value');
    return this._name;
  },
  set(value) {
    ('Setting value to', value);
    this._name = value;
  },
  enumerable: true,
  configurable: true
});

const obj = {};
(obj, 'readonly', {
  value: 'I am read-only',
  writable: false,
  enumerable: true,
  configurable: false
});
 = 'New value'; // Invalid();  // 'I am read-only'

const obj = {};
(obj, 'hidden', {
  value: 'You cannot see me',
  enumerable: false
});
((obj)); // []
();       // 'You cannot see me'

const person = {
  firstName: 'John',
  lastName: 'Doe'
};
(person, 'fullName', {
  get() {
    return `${} ${}`;
  },
  set(value) {
    [, ] = (' ');
  }
});
();    // 'John Doe'
 = 'Jane Smith';
();   // 'Jane'
();    // 'Smith'

function observe(obj) {
  if (!obj || typeof obj !== 'object') return;
  // Iterate through each property of the object  (obj).forEach(key => {
    let value = obj[key];
    let dep = new Dep(); // Dependency collector    (obj, key, {
      get() {
        // Collect dependencies        if () {
          ();
        }
        return value;
      },
      set(newValue) {
        if (value === newValue) return;
        value = newValue;
        // Notify all dependencies to update        ();
      }
    });
    // Recursive Observer Properties    if (typeof value === 'object') {
      observe(value);
    }
  });
}
// Use exampleconst data = {
  user: {
    name: 'John',
    age: 20
  }
};
observe(data);
// Now data All properties of an object are responsive

// Cannot use data descriptors and accessor descriptors at the same time(obj, 'prop', {
  value: 123,
  get() { return 123; } // mistake!});

// Batch define attributes(obj, {
  prop1: {
    value: 123,
    writable: true
  },
  prop2: {
    get() { return this.prop1 * 2; }
  }
});

// All descriptor attributes default to false(obj, 'prop', {
  value: 123
  // writable: false
  // enumerable: false
  // configurable: false
});