vue3.0响应式原理.reactive watchEffect

最新推荐文章于 2022-11-12 11:59:11 发布

小河马游六花

最新推荐文章于 2022-11-12 11:59:11 发布

阅读量103

点赞数

分类专栏：手写文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_41198447/article/details/126412373

版权

手写专栏收录该内容

16 篇文章 0 订阅

订阅专栏

固定值

let activeEffect;
class Dep {
  constructor(value) {
    this.subscribes = new Set()
    this._value = value
  }
  get value() {
    this.depend()
    return this._value
  }
  set value(newValue) {
    this._value = newValue
    this.notify()
  }
  depend() {
    if (activeEffect) {
      this.subscribes.add(activeEffect)
    }
  }
  notify() {
    this.subscribes.forEach(effect => {
      effect()
    })
  }
}

function watchEffect(effect) {
  activeEffect = effect 
  effect()
  activeEffect = null
}

const dep = new Dep('hello!')
watchEffect(() => {
  console.log(dep.value) // hello！
})
dep.value = 'change!' // change!

Object.defineProperty

let activeEffect;

class Dep {
  subscribes = new Set()
  depend() {
    if (activeEffect) {
      this.subscribes.add(activeEffect)
    }
  }
  notify() {
    this.subscribes.forEach(effect => {
      effect()
    })
  }
}

function watchEffect(effect) {
  activeEffect = effect 
  effect()
  activeEffect = null
}

function reactive(raw) {
  
  Object.keys(raw).forEach(key => {
    const dep = new Dep()
    let value = raw[key]

    Object.defineProperty(raw, key, {
      get() {
        dep.depend()
        return value
      },
      set(newValue) {
        value = newValue
        dep.notify()
      }
    })
  })
  return raw
}

const state = reactive({
  count: 1
})

watchEffect(() => {
  console.log(state.count)
})

state.count++

Proxy

let activeEffect;

class Dep {
  subscribes = new Set()
  depend() {
    if (activeEffect) {
      this.subscribes.add(activeEffect)
    }
  }
  notify() {
    this.subscribes.forEach(effect => {
      effect()
    })
  }
}

function watchEffect(effect) {
  activeEffect = effect
  effect()
  activeEffect = null
}

const targetMap = new WeakMap()

function getDep(target, key) {
  let depMap = targetMap.get(target)
  if (!depMap) {
    depMap = new Map()
    targetMap.set(target, depMap)
  }
  let dep = depMap.get(key)
  if (!dep) {
    dep = new Dep()
    depMap.set(key, dep)
  }
  return dep
}
const reactiveHandlers = {
  get(target, key, receiver) {
    const dep = getDep(target, key)
    dep.depend()
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    const dep = getDep(target, key)
    let result = Reflect.set(target, key, value, receiver)
    dep.notify()
    return result
  }
}
function reactive(raw) {
  return new Proxy(raw, reactiveHandlers)
}

const state = reactive({
  count: 1
})

watchEffect(() => {
  console.log(state.count)
})

state.count++