const obj = {};
Object.defineProperty(obj, "a", {
  value: 1,
  writable: false, // 是否可写
  configurable: false, // 是否可配置
  enumerable: false, // 是否可枚举
});

// 上面给了三个 false, 下面的相关操作就很容易理解了
obj.a = 2; // 无效
delete obj.a; // 无效
for (key in obj) {
  console.log(key); // 无效
}

Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// ...
if (Dep.target) {
// 收集依赖
dep.depend()
}
return value
},
set: function reactiveSetter (newVal) {
// ...
// 通知视图更新
dep.notify()
}
})
对象的变异
以下的方法为什么不更新

data () {
return {
obj: {
a: 1
}
}
}

methods: {
update () {
this.obj.b = 2
}
}

function set(target: Array<any> | Object, key: any, val: any): any {
  // ....
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}
数组的变异;
var vm = new Vue({
  data: {
    items: ["1", "2", "3"],
  },
});
vm.items[1] = "4"; // 视图并未更新
vm.items.length = 6; // 视图并未更新

function defineReactive(data, key, val) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function defineGet() {
      console.log(`get key: ${key} val: ${val}`);
      return val;
    },
    set: function defineSet(newVal) {
      console.log(`set key: ${key} val: ${newVal}`);
      val = newVal;
    },
  });
}

function observe(data) {
  Object.keys(data).forEach(function (key) {
    defineReactive(data, key, data[key]);
  });
}

let test = [1, 2, 3];

observe(test);

test[0] = 4; // set key: 0 val: 4
// 以上的例子可以说明这不是 defineProperty 的锅，但是我们打印 test

console.log(test);

const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse",
];

methodsToPatch.forEach(function (method) {
  // 缓存原生数组
  const original = arrayProto[method];
  // def 使用 Object.defineProperty 重新定义属性
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args); // 调用原生数组的方法

    const ob = this.__ob__; // ob就是observe实例observe才能响应式
    let inserted;
    switch (method) {
      // push和unshift方法会增加数组的索引，但是新增的索引位需要手动observe的
      case "push":
      case "unshift":
        inserted = args;
        break;
      // 同理，splice的第三个参数，为新增的值，也需要手动observe
      case "splice":
        inserted = args.slice(2);
        break;
    }
    // 其余的方法都是在原有的索引上更新，初始化的时候已经observe过了
    if (inserted) ob.observeArray(inserted);
    // dep通知所有的订阅者触发回调
    ob.dep.notify();
    return result;
  });
});

var proxy = new Proxy(target, handler);

const originObj = {}
const proxyObj = new Proxy(originObj,{
get: function (target, propKey, receiver) {
return 10
}
});
// 代理只会对 proxy 对象生效，如上方的 origin 就没有任何效果
proxyObj.a // 10;
proxyObj.b // 10;
originObj.a // undefined
origin.b // undefined
// 使用 has 方法隐藏某些属性，不被 in 运算符发现
var handler = {
has (target, key) {
if (key[0] === '\_') {
return false;
}
return key in target;
}
};
var target = { \_prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
console.log('\_prop' in proxy); // false
// 又比如说 apply 方法拦截函数的调用、call 和 apply 操作。
// apply 方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组，
var target = function () { return 'I am the target'; };
var handler = {
apply: function () {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
p();
// "I am the proxy"
// ownKeys 方法可以拦截对象自身属性的读取操作
let target = {
\_bar: 'foo',
\_prop: 'bar',
prop: 'baz'
};

let handler = {
ownKeys (target) {
return Reflect.ownKeys(target).filter(key => key[0] !== '\_');
}
};

let proxy = new Proxy(target, handler);
for (let key of Object.keys(proxy)) {
console.log(target[key]);
}

const duck = {
  name: "Maurice",
  color: "white",
  greeting: function () {
    console.log(`Quaaaack! My name is ${this.name}`);
  },
};

Reflect.has(duck, "color");
// true
Reflect.has(duck, "haircut");
// false

const duck = {
  name: "Maurice",
  color: "white",
  greeting: function () {
    console.log(`Quaaaack! My name is ${this.name}`);
  },
};
Reflect.set(duck, "eyes", "black"); // returns "true" if successful

console.log(Reflect.ownKeys(duck)); // ["name", "color", "greeting", "eyes"]