VUE 响应式原理

function observe(data) {
  if (!data || typeof data !== 'object') return
  for (const key in data) {
    let val = data[key]
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get: function () {
        track(data, key)
        return val
      },
      set: function (newVal) {
        trigger(data, key, newVal)
        val = newVal
      },
    })
    if (typeof val === 'object') {
      observe(val)
    }
  }
}

function track(data, key) {
  console.log('get data', key)
}

function trigger(data, key, value) {
  console.log('set data', key, ':', value)
}

var data = {
  name: 'ma',
  friends: [1, 2, 3],
}

observe(data)

console.log(data.name)

data.name = 'other'
data.friends[0] = '1'
//data.friends 会打印 get data friends
data.friends[3] = '4' //非响应式
//data.friends 会打印 get data friends
data.age = 20 //非响应式

const dinner = {
    meal: 'tacos'
}
const handler = { 
    get (target, prop) { 
        console.log('get___', prop)
        return Reflect.get(...arguments)
    },
    set(target, key, value) { 
        console.log('set___', key, value) 
        return Reflect.set(...arguments)
    }
}
const proxy = new Proxy(dinner, handler) 
console.log(proxy.meal)
proxy.food='abc'

function reactive(obj) {
    const handler = {
        get(target, prop, receiver) { 
            track(target, prop)
            const value = Reflect.get(...arguments) 
            if (typeof value === 'object') {
                return reactive(value)
            } else { 
                return value
            }
        },
        set(target, key, value, receiver) { 
            trigger(target, key, value) 
            return Reflect.set(...arguments)
        }
    }
    return new Proxy(obj, handler)
}
function track(data, key) { 
    console.log('get data', key)
}
function trigger(data, key, value) { 
    console.log('set data', key, value)
}
const dinner = { 
    meal: 'tacos'
}
const proxy = reactive(dinner)
proxy.meal = 'apple'
proxy.list =[]
proxy.list.push(1) // 响应式