数据是怎么发生变化的？

数据是怎么发生变化的？vue3之前是使用Object.defineProperty这个api来对需要侦测变化的数据进行拦截，添加get，set方法，这样就可以知道数据什么时候被修改。

**
 * 将传入的obj，动态的设置一个key，它的值是val
 * @param {Object} obj 要接收的对象
 * @param {String} key 要设置的键
 * @param {*} val 要设置的值
 */
function defineReactive(obj, key, val) {
  // * 如果原始对象的值是对象，那么还是需要递归遍历该值
  observe(val);
  // - 要拦截的对象obj
  // - 要设置的属性名称
  // - descriptor属性描述器，是一个对象，里面有set和get方法
  Object.defineProperty(obj, key, {
    get() {
      // 返回的是最新的值
      console.log('get key', key); // sy-log
      return val;
    },
    set(v) {
      // 如果老的值与新传进来的值不相等 设置为最新的值。这样get里面拿到的就是最新的值
      if (val !== v) {
        console.log('set key', key); // sy-log
        // 因为传入的新值v可能还是一个对象， 所以需要遍历。
        observe(v);
        val = v;
      }
    },
  });
}

/**
 * 递归遍历传入的对象，动态拦截该对象上的所有的key
 * @param {Object} obj 要递归遍历的对象
 */
function observe(obj) {
  // 如果传入的不是对象 直接返回该值
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  Object.keys(obj).forEach((key) => {
    // 响应式的设置值。
    defineReactive(obj, key, obj[key]);
  });
}

const obj = {
  foo: 'foo',
  bar: 'bar',
  baz: {
    a: 1,
  },
};
// defineReactive(obj, 'name', 'henry');
observe(obj);
obj.name;
obj.name = 'foooooo';
set(obj, 'baz', { a: 10 });
console.log(obj.baz);