const vm = new Vue({
 data () {
  return {
   count: 0,
   person: { name: 'xxx' },
   arr: [1, 2, 3]
  }
 }
})
let arrayMethods
function Vue (options) { // 這里只考慮對 data 數(shù)據(jù)的操作
 let data = options.data
 if (data) {
  data = this._data = typeof data === 'function' ? data.call(this) : data
 }
 observer (data)
}
function observer(data) { 
 if (typeof data !== 'object' || data === null) {
  return data
 }
 if (data.__ob__) { // 存在 __ob__ 屬性，說明已經(jīng)被攔截過了
  return data
 }
 new Observer(data)
}

class Observer {
 constructor (data) {
  Object.defineProperty(data, '__ob__', { // 在 data 上定義 __ob__ 屬性，在數(shù)組劫持里需要用到
   enumerable: false, // 不可枚舉
   configurable: false, // 不可配置
   value: this // 值是 Observer 實(shí)例
  })
  if (Array.isArray(data)) { // 對數(shù)組進(jìn)行攔截
   data.__proto__ = arrayMethods // 原型繼承
   this.observerArray(data)
  } else { // 對象進(jìn)行攔截
   this.walk(data)
  }
 }
 walk (data) {
  const keys = Object.keys(data)
  for(let i = 0; i < keys.length; i++) {
   const key = keys[i]
   defineReactive(data, key, data[key])
  }
 }
 observerArray (data) { // 攔截?cái)?shù)組中的每一項(xiàng)
  data.forEach(value => observer(value))
 }
}

// 處理對象的攔截
function defineReactive(data, key, value) {
 observer(value) // 如果 value 值仍是對象類型，需要遞歸劫持
 Object.defineProperty(data, key, {
  get() {
   return value
  },
  set(newValue){
   if (newValue === value) return
   value = newValue
   observer(newValue) // 如果設(shè)置 newValue 值也是對象類型，需要被劫持
  }
 })
}

const oldArrayPrototype = Array.prototype
arrayMethods = Object.create(oldArrayPrototype)
const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'] // 能夠改變原數(shù)組的方法
methods.forEach(method => {
 arrayMethods[methods] = function (...args) {
  const result = oldArrayPrototype[methods].call(this, ...args)
  const ob = this.__ob__ // this 就是調(diào)用改方法的數(shù)組
  let inserted; // 數(shù)組新增的項(xiàng)的集合，需要再對其進(jìn)行攔截
  switch(methods) {
   case 'push': 
   case 'unshift':
    inserted = args
   case 'splice':
    inserted = args.slice(2) // 因?yàn)?splice 第二個(gè)參數(shù)后面的才是新增的
  }
  if (inserted) {
   ob.observerArray(inserted)
  }
  return result
 }
})

const handler = {
 get (target, key) {
  if (typeof target[key] === 'object' && target[key] !== null) {
   return new Proxy(target[key], handler)
  }
  return Reflect.get(target, key)
 },
 set (target, key, value) {
  if(key === 'length') return true
  console.log('update')
  return Reflect.set(target, key, value)
 }
}
const obj = {
 arr: [1, 2, 3],
 count: { num: 1 }
}
// obj 是代理的目標(biāo)對象， handler 是配置對象
const proxy = new Proxy(obj, handler)