vue3响应式模拟实现(reactive/effect/track/trigger)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
// 是否object
const isObject = obj => typeof obj === 'object' && obj !== null

// 使用es6的Proxy模拟vue3响应式
function reactive(obj){
  if(!isObject(obj)) return obj

  return new Proxy(obj,{
    get(target,key,receiver){
      const res = Reflect.get(target,key,receiver)
      console.log('get',res)
      
      // 依赖收集
      track(target,key)
      // 递归
      return isObject(res)?reactive(res):res
    },
    set(target,key,value,receiver){
      const res = Reflect.set(target,key,value,receiver)
      console.log('set',key)
      // 触发副作用
      trigger(target,key)
      return res
    },
    deleteProperty(target,key){
      const res = Reflect.deleteProperty(target,key)
      // 触发副作用
      trigger(target,key)
      console.log('deleteProperty',key)
      return res
    }
  })
}

//临时存储副作用函数
const effectStack = []

// 副作用函数：建立传入fn和其内部的依赖之间映射关系
function effect(fn){
  //  执行依赖的get的方法
  const e = createReactiveEffect(fn)

  // 立即执行
  e()
  return e
}

function createReactiveEffect(fn){
  //处理错误 保存到stack
  const effect = function(...args){
    try {
      // 入栈
      effectStack.push(effect)
      //执行
      return fn(...args)
    } finally{
      // 出栈
      effectStack.pop()
    }
  }

  return effect
}

// 依赖管家
const targetMap = new WeakMap()

// 依赖收集
function track(target,key){
  //获取副作用函数
  const effect = effectStack[effectStack.length-1]
  if(effect){
    // 初始化
    let depMap = targetMap.get(target)
    if(!depMap){
      depMap = new Map()
      targetMap.set(target,depMap)
    }

    // 从depMap中获取副作用函数集合
    let deps = depMap.get(key)
    // 初始化的deps不存在
    if(!deps){
      deps = new Set()
      depMap.set(key,deps)
    }

    // 放入新传入的副作用
    // 使用Set可以去重
    deps.add(effect)
  }
}

// 出触发副作用
function trigger(target,key){
  // 获取 target对应的set
  const depMap = targetMap.get(target)
  
  if(!depMap){
    return
  }

  const deps = depMap.get(key)
  if(deps){
    //循环执行内部所有副作用函数
    deps.forEach(dep => dep())
  }
}

/*
// 测试effect
const state = reactive({foo:'哈哈哈',nb:{a:'你好'},arr:[112]})
effect(()=>{
  console.log('effect',state.foo,state.nb.a)
})

state.foo = '测试1'
*/


//响应式reactive测试
/**
 *
const state = reactive({foo:'哈哈哈',nb:{a:'你好'},arr:[112]})
state.foo
state.foo = '呵呵'
state.hi = 'jja'
delete state.hi

state.arr.push(33,888)
state.arr
state.arr.pop()
state.arr

state.nb.a
state.nb.a = '是他'
state.nb.a

state.nb = {b:'换一个他'}
state.nb.b
 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app"></div>

<script src="./reactive.js"></script>
<script>
    const state = reactive({
      name:'无敌',
      age:10
    })

    effect(()=>{
       app.innerHTML = `我叫${state.name},今年${state.age}了`
    })

    setTimeout(()=>{
      state.name = '改名无双'
    },3000)
    
</script>