基于vue3源码及《vue设计与实现》―手写 vue 响应式系统

已于 2022-10-29 20:17:07 修改
阅读量899 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
于 2022-04-18 21:38:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30763385/article/details/124244177
版权

初始

1s 后, 修改 obj.text 的值,document.body.innerText上的内容随之发生更改

使用如下

<html></html>

<script src="./index.js"></script>
<script>
  let obj = {
    text: "hello world"
  }
  obj = createReactiveObject(obj)

  effect(() => {
    document.body.innerText = obj.text
  })

  setTimeout(() => {
    obj.text = "hello vue"
  }, 1000)
</script>

大致逻辑，对传入 createReactiveObject 的对象进行代理，当 getter/setter 对象内的值时，会触发对应函数（如下面的 Set 内的函数，Set 为所有使用到 text 的地方）
传入 effect 内的函数，会先执行一遍，使得可以触发对应 getter/setter 函数
track 函数用于收集所有使用到响应式数据的地方
trigger 函数用于触发 track 所收集的
targetMap 的内容，如

targetMap = {
	{text: 'hello vue'}: {
		'text': Set(() => { document.body.innerText = obj.text })
	}
}

// 对应结构
targetMap = {
	Object: Map
}
Object = target		// Proxy 中的 target，即整个 obj 对象
Map = {
	key: Set(fn);
}

实现代码

let targetMap = new WeakMap()
let activeEffect

class ReactiveEffect {
  constructor(fn) {
    this.fn = fn
  }
  run() {
    activeEffect = this
    this.fn()
  }
}

function effect(fn) {
  const _effect = new ReactiveEffect(fn)
  _effect.run()
}

function createGetter() {
  return function get(target, key) {
    const res = target[key]
    track(target, key)
    return res
  }
}

function createSetter() {
  return function set(target, key, newValue) {
    target[key] = newValue
    trigger(target, key)
    return true   // 严格模式, set 不返回 true 会报错
  }
}

function createReactiveObject(data) {
  const get = createGetter()
  const set = createSetter()
  const handler = {
    get,
    set
  }
  return new Proxy(data, handler)
}

function track(target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  trackEffects(dep)
}

function trackEffects(dep) {
  dep.add(activeEffect)
}

function trigger(target, key) {
  let depsMap = targetMap.get(target)
  if (!depsMap) return
  let dep = depsMap.get(key)
  triggerEffects(dep)
}

function triggerEffects(dep) {
  dep && dep.forEach(effect => {
    effect.run()
  });
}

在 ts 中, 当constructor 的参数为 public 时, 无需赋值便可使用

class Demo {
  constructor(public foo: string, public fn: () => void) {
  }
  run() {
    console.log(this.foo)
    console.log(this.fn)
  }
}
const demo = new Demo('haha', () => console.log('haha'))

demo.run()
// haha
// [Function (anonymous)]

public 默认指代 this, 编译成 js 代码如下

"use strict";
var Demo = /** @class */ (function () {
    function Demo(foo, fn) {
        this.foo = foo;
        this.fn = fn;
    }
    Demo.prototype.run = function () {
        console.log(this.foo);
        console.log(this.fn);
    };
    return Demo;
}());
var demo = new Demo('haha', function () { return console.log('haha'); });
demo.run();

1 依赖清除

document.body.innerText = obj.ok ? obj.text : 'not': body 显示的内容与 obj.ok 有关, 1秒后将 obj.ok 设置为 false , 此时系统内已经和 obj.text 没什么关系了, 无论 obj.text 怎么改变, 都不应该执行effect 函数, 当前的代码还做不到, 2秒后修改 obj.text 的值, 依然执行effect函数

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    ok: true,
    text: "hello world"
  }
  obj = createReactiveObject(obj)

  effect(() => {
    document.body.innerText = obj.ok ? obj.text : 'not'
    console.log(`执行了 effect 函数`)
  })

  setTimeout(() => {
    obj.ok = false
    console.log(targetMap)
  }, 1000)
  
  setTimeout(() => {
    obj.text = 'hello vue'
  }, 2000)
</script>

解决思路, 每次effect函数执行的时候, 将所有相关联的依赖从集合中删除

实现方式, trackEffects时给 deps 添加 dep, 当 cleanupEffect时, 可通过 effect.deps拿到所有的dep

class ReactiveEffect {
  deps = []		// <-----	new code
  constructor(fn) {
    this.fn = fn
  }
  run() {
  	cleanupEffect(this)		// <-----	new code
    activeEffect = this
    this.fn()
  }
}

function cleanupEffect(effect) {		// <-----	new code
  for (let i = 0; i < effect.deps.length; i++) {
    const dep = effect.deps[i]
    dep.delete(effect)
  }
  effect.deps.length = 0
}

// ...

function trackEffects(dep) {
  dep.add(activeEffect)
  activeEffect.deps.push(dep)		// <-----	new code
}

执行当前函数, 会发生死循环, 原因如下

setTimeout(() => {
  obj.ok = false		// <-----	trigger
  console.log(targetMap)
}, 1000)

trigger(target, key)		// <-----	triggerEffects

// ---------------- 从这里开始无线套娃 -----------------------
function triggerEffects(dep) {
  dep && dep.forEach(effect => {
    effect.run()		// <-----	run
  });
}

run() {
  cleanupEffect(this)		// <-----	清除 dep 内的 effect
  activeEffect = this
  this.fn()		// <-----	执行 effect fn
}

effect(() => {
  document.body.innerText = obj.ok ? obj.text : 'not'		// <-----	执行 trackEffects 添加依赖
})

function trackEffects(dep) {	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 添加重复的依赖
  dep.add(activeEffect)		// <-----	重新给 dep 添加依赖, 问题出在这里, 之后又会返回到 triggerEffects
  activeEffect.deps.push(dep)
}

function triggerEffects(dep) {
  dep && dep.forEach(effect => {
    effect.run()		// <-----	执行在 trackEffects 添加的 dep
  });
}

因为 trigger 时会遍历 dep, 执行 dep 内所有的 effect 函数, effect 函数会cleanupEffect删除依赖, 再执行 track添加依赖, 再 set 中, 套娃了, 如下

遍历 set 集合时, 如果一个已经访问过的值, 从集合中删除并又重新添加, 如果遍历未结束, 该值会被重新访问

const set = new Set([1])
set.forEach(item => {
  set.delete(1)
  set.add(1)
  console.log('死循环中......')
})

因此, 解决如下

const set = new Set([1])
const newSet = new Set(set)
newSet.forEach(item => {
  set.delete(1)
  set.add(1)
  console.log('执行一次')
})

对应代码如下

function triggerEffects(dep) {
  dep = new Set(dep)
  dep.forEach(effect => {
    effect.run()
  });
}

上面是<vue设计与实现>中实现的代码, 而在 vue3 源码中是这样实现的, 将 dep 扩展成数组, 然后遍历那个数组, 也能解决死循环的问题

function triggerEffects(dep) {
  for (const effect of Array.isArray(dep) ? dep : [...dep]) {
    effect.run()
  }
}

2 effect嵌套

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 'foo',
    bar: "bar"
  }
  obj = createReactiveObject(obj)

  let temp1, temp2

  effect(function effectFn1() {
    console.log('effectFn1 执行')
    
    effect(function effectFn2() {		// <-----	将会覆盖 activeEffect	
      console.log('effectFn2 执行')
      temp2 = obj.bar
    })
    
    temp1 = obj.foo
  })

  setTimeout(() => {
    obj.foo = false		// <-----	effectFn2 执行
  }, 1000);
</script>

输出和预期不符, 因为 effectFn2 覆盖了activeEffect, 导致effectFn1添加的是effectFn2内的实例

所以我们要在修改activeEffect那块代码那做出调整

const effectStack = []    // <-----	new code

class ReactiveEffect {
  deps = []
  constructor(fn) {
    this.fn = fn
  }
  run() {
  	cleanupEffect(this)
    activeEffect = this
    effectStack.push(this)    // <-----	new code
    this.fn()
    effectStack.pop()    // <-----	new code
    activeEffect = effectStack[effectStack.length - 1]    // <-----	new code
  }
}

3 无限循环

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 'foo'
  }
  obj = createReactiveObject(obj)

  effect(() => {
    obj.foo = obj.foo + 1
  })
</script>

原因如下

run() {
  // ......
  this.fn()
  // ......
}

() => {
  obj.foo = obj.foo + 1		// <-----	track		// <-----	trigger
}

function trackEffects(dep) {
  dep.add(activeEffect)		// <-----	添加依赖
  activeEffect.deps.push(dep)
}

function triggerEffects(dep) {
  dep = new Set(dep)
  dep.forEach(effect => {		// <-----	遍历依赖
    effect.run()
  });
}

run() {		// <-----	没想到吧, 我又回来了
  // ......
  this.fn()
  // ......
}

解决办法: 如果 trigger 触发的effect 函数与当前正在执行的effect 函数是同一个函数, 则不执行

function triggerEffects(dep) {
  dep = new Set(dep)
  dep.forEach(effect => {
    if (effect !== activeEffect) {    // <-----	new code
      effect.run()
    }    // <-----	new code
  });
}

解构版本

function triggerEffects(dep) {
  for (const effect of Array.isArray(dep) ? dep : [...dep]) {
    if (effect !== activeEffect) {    // <-----	new code
      effect.run()
    }    // <-----	new code
  }
}

当前所有代码

<html></html>
<script src="./index.js"></script>
<script>
  // ------------依赖无关----------------
  // 执行了 effect 函数 2 次
  let obj = {
    ok: true,
    text: "hello world"
  }
  obj = createReactiveObject(obj)

  effect(() => {
    document.body.innerText = obj.ok ? obj.text : 'not'
    console.log(`执行了 effect 函数`)
  })

  setTimeout(() => {
    obj.ok = false
  }, 1000)

  setTimeout(() => {		// <-----	清除依赖	
    obj.text = 'hello vue'
  }, 2000)


  // ------------effect嵌套----------------
  // effectFn1 执行 effectFn2 执行  各执行2次
  let obj2 = {
    foo: 'foo',
    bar: "bar"
  }
  obj2 = createReactiveObject(obj2)

  let temp1, temp2

  effect(function effectFn1() {
    console.log('effectFn1 执行')

    effect(function effectFn2() {		// <-----	将会覆盖 activeEffect	
      console.log('effectFn2 执行')
      temp2 = obj2.bar
    })

    temp1 = obj2.foo
  })

  setTimeout(() => {
    obj2.foo = false		// <-----	effectFn2 执行
  }, 1000);
  

  // ------------无限循环----------------
  // 不会卡死
  effect(() => {
    obj.foo = obj.foo + 1
  })
</script>

执行了 effect 函数
effectFn1 执行
effectFn2 执行
执行了 effect 函数
effectFn1 执行
effectFn2 执行

let targetMap = new WeakMap()

const effectStack = []    // <-----	2 new code
let activeEffect

class ReactiveEffect {
  deps = []		// <-----	1 new code
  constructor(fn) {
    this.fn = fn
  }
  run() {
  	cleanupEffect(this)		// <-----	1 new code
    activeEffect = this
    effectStack.push(this)    // <-----	2 new code
    this.fn()
    effectStack.pop()    // <-----	2 new code
    activeEffect = effectStack[effectStack.length - 1]    // <-----	2 new code
  }
}

function cleanupEffect(effect) {		// <-----	1 new code
  for (let i = 0; i < effect.deps.length; i++) {
    const dep = effect.deps[i]
    dep.delete(effect)
  }
  effect.deps.length = 0
}

function effect(fn) {
  const _effect = new ReactiveEffect(fn)
  _effect.run()
}

function createGetter() {
  return function get(target, key) {
    const res = target[key]
    track(target, key)
    return res
  }
}

function createSetter() {
  return function set(target, key, newValue) {
    target[key] = newValue
    trigger(target, key)
    return true
  }
}

function createReactiveObject(data) {
  const get = createGetter()
  const set = createSetter()
  const handler = {
    get,
    set
  }
  return new Proxy(data, handler)
}

function track(target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  trackEffects(dep)
}

function trackEffects(dep) {
  dep.add(activeEffect)
  activeEffect.deps.push(dep)		// <-----	1 new code
}

function trigger(target, key) {
  let depsMap = targetMap.get(target)
  if (!depsMap) return
  let dep = depsMap.get(key)
  triggerEffects(dep)
}

function triggerEffects(dep) {
  for (const effect of Array.isArray(dep) ? dep : [...dep]) {    // <-----	1 new code  set套娃问题
    if (effect !== activeEffect) {    // <-----	3 new code
      effect.run()
    }    // <-----	3 new code
  }
}

4 调度执行

当触发trigger时,可以决定effect 函数执行的时机⏲与次数

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  effect(() => console.log(obj.foo))

  obj.foo++
  console.log('end')
</script>

1
2
end

在不调整代码位置的前提下, 如何使end在2前面执行

改变执行时机

使用如下

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  const fn = () => console.log(obj.foo)    // <-----	diff code
  effect(fn, {
    scheduler: () => queueJob(fn)
  })    // <-----	diff code

  obj.foo++

  console.log('end')
</script>

新添加代码

class ReactiveEffect {
  deps = []
  constructor(fn, scheduler = null) {    // <-----	diff code
    this.fn = fn
    this.scheduler = scheduler    // <-----	new code
  }
}

function effect(fn, options) {    // <-----	diff code
  const _effect = new ReactiveEffect(fn, options.scheduler)    // <-----	diff code
  _effect.run()
}

function triggerEffects(dep) {
  for (const effect of Array.isArray(dep) ? dep : [...dep]) {
    if (effect !== activeEffect) {
      if (effect.scheduler) {    // <-----	new code
        effect.scheduler()    // <-----	new code
      } else {    // <-----	new code
        effect.run()
      }    // <-----	new code
    }
  }
}

// <-----	the bottom is new code 
const queue = []
let flushIndex = 0
const resolvedPromise = Promise.resolve()

function findInsertionIndex(id) {
  let start = flushIndex + 1
  let end = queue.length

  while (start < end) {
    const middle = (start + end) >>> 1
    const middleJobId = getId(queue[middle])
    middleJobId < id ? (start = middle + 1) : (end = middle)
  }

  return start
}

function queueJob(job) {
  if (job.id == null) {
    queue.push(job)
  } else {
    queue.splice(findInsertionIndex(job.id), 0, job)
  }
  queueFlush()
}

function queueFlush() {
  resolvedPromise.then(flushJobs)
}

const getId = (job) => job.id == null ? Infinity : job.id

function flushJobs() {
  queue.sort((a, b) => getId(a) - getId(b))
  try {
    for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
      const job = queue[flushIndex]
      if (job) {
        job()
      }
    }
  } finally {
    flushIndex = 0
    queue.length = 0
  }
}

可以看到, 如果有 scheduler, 就执行 scheduler

而 scheduler中的代码是个匿名函数, 其会调用queueJob, 它会将传入queueJob的函数压入一个栈中, 而栈会在微任务中执

七千字深度剖析 Vue3 的调度系统

改变执行次数-自定义刷新队列

不要过度状态, 只要最终状态

自己通过 promise 实现个调度器

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  const fn = () => console.log(obj.foo)
  effect(fn, {
    scheduler: () => flushJob(fn)   // <-----	diff code		(queueJob	->	flushJob)
  })    

  const p = Promise.resolve()    // <-----	new code
  let isFlushing = false
  function flushJob(fn) {
    if (isFlushing) return 
    isFlushing = true
    p.then(() => {
      fn()
    }).finally(() => {
      isFlushing = false
    })
  }    // <-----	new code

  obj.foo++
  obj.foo++    // <-----	new code
  obj.foo++
  obj.foo++
  obj.foo++    // <-----	new code

  console.log('end')
</script>

1
end
6

在 vue 中使用的方式

<script src="https://unpkg.com/vue@3"></script>

<script>
  const { reactive, effect } = Vue
  let obj = {
    foo: 1
  }
  obj = reactive(obj)

  const fn = () => console.log(obj.foo)
  effect(fn, {
    scheduler: () => flushJob(fn)
  })

  const p = Promise.resolve()
  let isFlushing = false
  function flushJob(fn) {
    if (isFlushing) return
    isFlushing = true
    p.then(() => {
      fn()
    }).finally(() => {
      isFlushing = false
    })
  }

  obj.foo++
  obj.foo++
  obj.foo++
  obj.foo++
  obj.foo++

  console.log('end')
</script>

5 Lazy

class ReactiveEffect {
  run() {
    // ......
    const res = this.fn()		// <----- diff code
    // ......
    return res		// <----- new code
  }
}

function effect(fn, options) {    // <-----	4 diff code
  const _effect = new ReactiveEffect(fn, options.scheduler)    // <-----	4 diff code
  if (!options.lazy) {		// <----- new code
    _effect.run()
  }		// <-----	new code
  const runner = _effect.run.bind(_effect)		// <-----	new code
  return runner		// <-----	new code
}

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  const fn = () => console.log(obj.foo)
  const foo = effect(fn, {
    lazy: true
  })    
  foo()
</script>

实际使用用处不大, 可如果将 fn 看成一个 getter 函数呢?

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  const fn = () => obj.foo + obj.foo    // <----- diff code
  const foo = effect(fn, {
    lazy: true
  })    
  console.log(foo())    // <----- diff code
  obj.foo = 123    // <----- new code
  console.log(foo())    // <----- new code
</script>

computed

无缓存使用

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  const fn = () => obj.foo + obj.foo
  const foo = computed(fn)    // <----- diff code
  console.log(foo.value)    // <----- diff code
</script>

function computed(getterOrOptions) {
  let getter
  let setter
  const onlyGetter = typeof getterOrOptions === 'function'
  if (onlyGetter) {
    getter = getterOrOptions
    setter = () => { }
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  return new ComputedRefImpl(getter, setter)
}

class ComputedRefImpl {
  constructor(getter, setter) {
    this._setter = setter
    this.effect = new ReactiveEffect(getter)  
  }

  get value()  {
    return this.effect.run()
  }

  set value(newValue) {
    this._setter(newValue)
  }
}

以上代码多次访问foo.value时, 会进行多次计算

解决: 对值进行缓存的功能

有缓存使用

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  const fn = () => {
    console.log('computing......')    // <----- diff code
    return obj.foo + obj.foo    // <----- diff code
  }
  const foo = computed(fn)    // <----- diff code
  console.log(foo.value)    // <----- diff code
  console.log(foo.value)    // <----- diff code
  obj.foo = 123123
  console.log(foo.value)    // <----- diff code
</script>

class ComputedRefImpl {
  _value    // <----- new code
  _dirty = true    // <----- new code
  constructor(getter, setter) {
    this._setter = setter
    this.effect = new ReactiveEffect(getter, () => {    // <----- diff code
      if (!this._dirty) {
        this._dirty = true
      }
    })
  }

  get value() {
    if (this._dirty) {    // <----- new code
      this._dirty = false    // <----- new code
      this._value = this.effect.run()    // <----- new code
    }    // <----- new code
    return this._value    // <----- diff code
  }

  set value(newValue) {
    this._setter(newValue)
  }
}

effect 中不会触发

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  const fn = () => {
    console.log('computing......')
    return obj.foo + obj.foo
  }
  const foo = computed(fn)
  effect(() => {    // <----- new code
    console.log(foo.value)
  }, {})
  obj.foo++    // <----- new code		没有执行副作用函数
</script>

class ComputedRefImpl {
  constructor(getter, setter) {
    this._setter = setter
    this.effect = new ReactiveEffect(getter, () => { 
      if (!this._dirty) {
        this._dirty = true
        triggerEffects(this.dep)    // <----- new code 触发
      }
    })
    this.dep = new Set()    // <----- new code 设置
  }

  get value() {
    trackEffects(this.dep)    // <----- new code 收集				在 effect 函数中已经设置 activeEffect 了
    // ......
  }
}

当前所有代码

let targetMap = new WeakMap()

const effectStack = []    // <-----	2 new code
let activeEffect

class ReactiveEffect {
  deps = []		// <-----	1 new code
  constructor(fn, scheduler = null) {    // <-----	4 diff code
    this.fn = fn
    this.scheduler = scheduler    // <-----	4 new code
  }
  run() {
    cleanupEffect(this)		// <-----	1 new code
    activeEffect = this
    effectStack.push(this)    // <-----	2 new code
    const res = this.fn()		// <----- 5 diff code
    effectStack.pop()    // <-----	2 new code
    activeEffect = effectStack[effectStack.length - 1]    // <-----	2 new code
    return res		// <----- 5 new code
  }
}

function cleanupEffect(effect) {		// <-----	1 new code
  for (let i = 0; i < effect.deps.length; i++) {
    const dep = effect.deps[i]
    dep.delete(effect)
  }
  effect.deps.length = 0
}

function effect(fn, options) {    // <-----	4 diff code
  const _effect = new ReactiveEffect(fn, options.scheduler)    // <-----	4 diff code
  if (!options.lazy) {		// <----- 5 new code
    _effect.run()
  }		// <-----	5 new code
  const runner = _effect.run.bind(_effect)		// <-----	5 new code
  return runner		// <-----	5 new code
}

function createGetter() {
  return function get(target, key) {
    const res = target[key]
    track(target, key)
    return res
  }
}

function createSetter() {
  return function set(target, key, newValue) {
    target[key] = newValue
    trigger(target, key)
    return true
  }
}

function createReactiveObject(data) {
  const get = createGetter()
  const set = createSetter()
  const handler = {
    get,
    set
  }
  return new Proxy(data, handler)
}

function track(target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  trackEffects(dep)
}

function trackEffects(dep) {
  dep.add(activeEffect)
  activeEffect.deps.push(dep)		// <-----	1 new code
}

function trigger(target, key) {
  let depsMap = targetMap.get(target)
  if (!depsMap) return
  let dep = depsMap.get(key)
  triggerEffects(dep)
}

function triggerEffects(dep) {
  for (const effect of Array.isArray(dep) ? dep : [...dep]) {    // <-----	1 new code
    if (effect !== activeEffect) {    // <-----	3 new code
      if (effect.scheduler) {    // <-----	4 new code
        effect.scheduler()    // <-----	4 new code
      } else {    // <-----	4 new code
        effect.run()
      }    // <-----	4 new code
    }    // <-----	3 new code
  }
}

// <-----	4 the bottom is new code 
const queue = []
let flushIndex = 0
const resolvedPromise = Promise.resolve()

function findInsertionIndex(id) {
  let start = flushIndex + 1
  let end = queue.length

  while (start < end) {
    const middle = (start + end) >>> 1
    const middleJobId = getId(queue[middle])
    middleJobId < id ? (start = middle + 1) : (end = middle)
  }

  return start
}

function queueJob(job) {
  if (job.id == null) {
    queue.push(job)
  } else {
    queue.splice(findInsertionIndex(job.id), 0, job)
  }
  queueFlush()
}

function queueFlush() {
  resolvedPromise.then(flushJobs)
}

const getId = (job) => job.id == null ? Infinity : job.id

function flushJobs() {
  queue.sort((a, b) => getId(a) - getId(b))
  try {
    for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
      const job = queue[flushIndex]
      if (job) {
        job()
      }
    }
  } finally {
    flushIndex = 0
    queue.length = 0
  }
}

// <-----	computed code 
function computed(getterOrOptions) {
  let getter
  let setter
  const onlyGetter = typeof getterOrOptions === 'function'
  if (onlyGetter) {
    getter = getterOrOptions
    setter = () => { }
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  return new ComputedRefImpl(getter, setter)
}

class ComputedRefImpl {
  _value    // <----- new code
  _dirty = true    // <----- new code
  constructor(getter, setter) {
    this._setter = setter
    this.effect = new ReactiveEffect(getter, () => {    // <----- diff code
      if (!this._dirty) {
        this._dirty = true
        triggerEffects(this.dep)    // <----- new code 触发
      }
    })
    this.dep = new Set()    // <----- new code 设置
  }

  get value() {
    trackEffects(this.dep)    // <----- new code 收集				在 effect 函数中已经设置 activeEffect 了
    if (this._dirty) {    // <----- new code
      this._dirty = false    // <----- new code
      this._value = this.effect.run()    // <----- new code
    }    // <----- new code
    return this._value    // <----- diff code
  }

  set value(newValue) {
    this._setter(newValue)
  }
}

watch

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  watch(obj,() => {
    console.log('watching ....')
  })
  
  obj.foo++
</script>

function watch(source, cb, options) {
  return doWatch(source, cb, options)
}

function doWatch(source, cb, options) {
  let getter
  if (typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }

  let scheduler = () => cb()
  const effect = new ReactiveEffect(getter, scheduler)
  effect.run()
}

function traverse(value, seen = new Set()) {
  if (typeof value !== 'object' || value === null || seen.has(value)) return value
  seen.add(value)
  for (const k in value) {
    traverse(value[k], seen)
  }
  return value
}

新旧值的使用

<html></html>
<script src="./index.js"></script>
<script>
  let obj = {
    foo: 1
  }
  obj = createReactiveObject(obj)

  watch(() => obj.foo,(newValue, oldValue) => {
    console.log(newValue)
    console.log(oldValue)
    console.log('watching ....')
  })

  obj.foo++
</script>

function watch(source, cb, options) {
  return doWatch(source, cb, options)
}

function doWatch(source, cb, options) {
  let getter
  if (typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }

  let oldValue   // <----- new code
  const job = () => {   // <----- new code
    const newValue = effect.run()   // <----- new code
    cb(newValue, oldValue)   // <----- new code
    oldValue = newValue   // <----- new code
  }   // <----- new code
  let scheduler = job   // <----- diff code
  const effect = new ReactiveEffect(getter, scheduler)
  oldValue = effect.run()   // <----- diff code
}

function traverse(value, seen = new Set()) {
  if (typeof value !== 'object' || value === null || seen.has(value)) return value
  seen.add(value)
  for (const k in value) {
    traverse(value[k], seen)
  }
  return value
}

立即执行

watch(() => obj.foo,(newValue, oldValue) => {
  console.log(newValue)
  console.log(oldValue)
  console.log('watching ....')
},{
  immediate: true
})

function doWatch(source, cb, options) {
  // ......
  if(options.immediate) {   // <----- new code
    job()   // <----- new code
  } else {   // <----- new code
    oldValue = effect.run()
  }   // <----- new code
}
小的时候可菜了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue的家具商城的设计与实现
04-18
基于vue的家具商城的设计与实现；在本项目中运用了vue，原生js，axios，div+css的相关知识实现用户注册登录，通过调取接口文档来实现数据的展示；实现列表页的展示；通过vue路由传参来传递参数；实现详情页的数据调取和展示；通过props以及emit来实现父子组件之间的传值；通过this.$eventBus.$emit和this.$eventBus.$on来实现非父子组件之间的传值；实现事件派发和事件监听；
基于Vue.js的在线设计开放平台研究与实现
07-20
基于MVVM前端框架Vue.js,搭建了提高协同效率和知识汇集的在线设计开发平台系统,更好地服务设计师、前端工程师及产品经理。功能包含设计原则、组件呈现以及资源下载几个功能模块,采用Vuecli脚手架搭建项目,http请求库Axios处理前后台数据交互。同时引入Vue-router和Vuex两个插件库,管理前端路由跳转和全局状态变量。最后利用Webpack3构建生成代码包,通过nginx反向代理访问。该系统实现了提高研发团队上下游协同效率,避免重复性的设计和前端工作,提高开发效率的目的。
基于VUE的酒店管理系统的设计与实现
软件开发实战项目分享
11-09 3985
本系统主要由以下几个功能模块组成; 登录功能：员工可以通过登陆界面的进入，系统的主界面。 系统通知功能：管理员可以通过系统发送通知功能给员工发送通知。 登记入住功能：在有客户想要住店时，员工可以纪录客户的信息。 客户管理功能：可以查看已入住的客户，并且进行退房和修改信息以及查询的操作。 员工管理功能：可以查看员工的信息，修改员工的信息。 权限管理功能：可以管理员工的权限，防止任意操作。 房间管理功能：可以设定酒店房间的类型和价格。 员工聊天功能：此模块可以供员工之间的信息沟通，更方便工作的交
读书笔记——Vue.js设计与实现
最新发布
m0_68054161的博客
07-10 866
首先，向vue.js和霍春阳前辈博客内容主要总结于“Vue.js设计与实现”，代码块实现来自我的仿写，可能存在bug。欢迎大家一起讨论学习，博客内容持续更新。
基于Vue框架的在线投票系统的设计与实现毕业设计-附源码221604
DZBS2000的博客
08-26 3084
在线投票系统的设计是基于Java技术、Mysql数据库、Tomcat服务器的方式设计，以Myeclipse和IDEA为开发工具，在Myeclipse集成环境下调试并允许，并运用SSM技术美化网页，辅之以CSS技术。 该系统实现了在线投票系统内部的各种工作流程计算机管理化，其中包括管理员的系统站点管理、用户管理、投票类型、投票区、话题讨论区、公告栏、论坛、论坛类型、文章、文章类型、在线投票任务等功能。 关键词：在线投票；Java技术；Mysql数据库...
Vue.js设计与实现(v3)
deku_Midoriya的博客
09-14 3348
Vue3
手写vue3响应式系统.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
vue响应式核心原理手写源码
01-11
手写Vue响应式源码可以帮助你更深入地理解上述概念。你可以尝试模拟`Observer`、`Dep`、`Watcher`这三个核心类的实现，并实现数据绑定、依赖收集、属性设置以及视图更新等功能。这将有助于你在实际开发中更好地优化...
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定
08-04
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定 帮你理解什么是数据劫持 什么是发布者-订阅者模式 帮你理解Vue内部是如何实现的双向数据绑定 了解Observer Dep Watcher三者之间的关系
珠峰T0级别讲师手写Vue2Vue3-视频教程网盘链接提取码下载.txt
10-10
《Vue2Vue3 手写实战进阶》课程由珠峰T0级别讲师授课，旨在帮助学员深入理解和熟练掌握Vue.js的升级版本。课程内容涵盖了Vue2到Vue3的重要变化，包括Composition API、Teleport、Fragments等新特性的手写实战演练。...
vue3+vite+openlayers6实现绘制扇形及环形组件代码
08-05
在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群：具备一定编程基础，...
基于vue的人力资源管理系统的设计与实现.rar
11-28
内容包括详细设计文档word版，附带开题报告和相关PPT等文档，供大家参考学习。摘要：本系统前端采用Vue技术进行开发,后端使用Nodejs搭建系统框架,以Element-admin快速构建页面,前后端分离的思想对该系统进行了规划,数据库访问层采用MyBatis框架实现系统业务模块和数据库的交互。通过RBAC的权限模型分配用户权限,实现员工在公司中担任某个角色,就拥有该角色对应的权限。支持薪酬全盘数据展示及分类展示（薪酬表、社保表、公积金表、个税表等）。员工可发起调休请假申请,完整记录员工每日的考勤状态。员工花名册全面记录员工信息,并支持打印,支持数据导入导出与中英文切换,搭建集团化组织架构管理。 本系统帮助用户从人事、考勤、财务功能出发,为公司的运营及监控提供有力保障,帮助企业整合化地创造价值、沟通、管理的企业生态。
毕业设计 基于Vue的在线聊天系统设计与实现
m0_71572237的博客
01-14 453
基于Vue的在线聊天系统本系统分为，，三个端：其中为客户端，为服务器端，为管理员端。主页 聊天 朋友圈 移动端 普通用户 管理员 启动客户端（8080端口） 启动管理员端（3000端口） 启动完成后流群访问以及可以分别访问客户端以及管理员端。
基于Vue和微服务框架博客网站系统设计与实现
毕业作品网站
09-16 943
本次设计使用的是JavaWeb开发中主流的微服务架构方式，微服务一定会涉及分布式，一般提到微服务大多在系统逻辑与物理结构设计上，而分布式则涉及到的都是一些机器或者实现技术，阅读本章可以理解整个博客用到的理论及其技术。博客是互联网的一种分享类型的技术产物，但是如何留着用户才是重要的，并不都是所有的功能都会涉及到“高并发”，博客的功能多样性会增强用户的体验，让用户对博客的使用产生依赖性，利用从众心态合理地开发增值功能。
读《vue3设计与实现》1
tuku0801的专栏
06-23 795
vue3的设计和实现 读书笔记。vue3的特性：渲染器、编译器、响应式数据
Vue3响应式设计细节与实现原理（一）
lyh6665的博客
03-21 605
vue3响应式原理解析
（附源码）node.js基于Vue技术的外卖平台的设计与实现 毕业设计 151448
Q_3461074420的博客
09-29 2408
外卖平台，在系统首页可以查看首页、公告消息、美食资讯、购物车、我的、跳转到后台等内容 外卖商品管理，在外卖商品管理可以查看商品编号、名称、类型、规格、价格、数量等内容，并可根据需要加入购物车 资讯列表，在资讯列表页面可以查看资讯详细信息，如图5-3所示。在注册页面通过填写用户账号、密码、用户姓名、手机等信息完成用户注册 管理员登录，通过填写注册时输入的用户名、密码、权限进行登录 管理员登录进入外卖平台可以查看首页、站点管理（轮播图、公告栏）用户管理（管理员、普通用户、卖家）内容管理（美食资讯、资讯分类）商城
vue3响应式系统的设计与实现（一）
l63492818的博客
03-29 294
vuejs响应式
【vue3】手写简单vue3响应式原理
前端学习博客
10-13 1616
vue3响应式的核心是使用proxy👉核心是使用核心是使用上面都出现了函数：effect()函数默认上来会执行一次，然后当属性值发生变化时，effect函数又会执行。
手写Vue源码与Vuex实践：路由解析与响应式设计
在本次笔记中，我们将深入探讨Vue.js的学习内容，包括手写Vue Router源码以及Kvuex（可选状态管理）的理解。首先，我们从Vue Router入手，鼓励读者探索其源代码，重点分析参数获取和嵌套路由的处理机制。在理解路由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值