手写简单vue3响应式原理(reactive ref toRef toRefs)

reactive ref toRef toRefs

// 判断对象是否是对象
const isObject = val => val !== null && typeof val === 'object';

export function reactive(target) {
  if (!isObject(target)) return;
  const handler = {
    get(target, key, receiver) {
      let result = Reflect.get(target, key, receiver);
      track(target, key)
      return result
    },
    set(target, key, value, receiver) {

      let oldValue = Reflect.get(target, key, receiver)
      let result = true;
      if (oldValue !== value) {
        result = Reflect.set(target, key, value, receiver);
        trigger(target, key)
      }

      return result
    }
  }

  return new Proxy(target, handler)
}


let activeEffect = null;
export function watchEffect(effect) {
  activeEffect = effect;
  effect()
  activeEffect = null
}

let targetMap = new WeakMap()
function track(target, key) {

  if (!activeEffect) return
  let depsMap = targetMap.get(target);

  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }

  let deps = depsMap.get(key);
  if (!deps) {
    depsMap.set(key, (deps = new Set()))
  }

  deps.add(activeEffect)

}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  let deps = depsMap.get(key);
  if (deps) {
    deps.forEach(effect => {
      effect()
    })
  }
}

// 判断一个对象是不是对象 是的话就用reactive代理
const convert = val => (isObject(val) ? reactive(val) : val)
class RefImpl {
  constructor(rawValue) {
    this._rawValue = rawValue;
    this.__v__isRef = true;
    // 判断 _rawValue 是否是一个对象
    // 如果是对象调用reactive使用 proxy来代理
    // 不是返回 _rawValue 本身
    this._value = convert(rawValue)
  }
  get value() {
    track(this, 'value')
    return this._value
  }
  set value(newValue) {

    if (newValue !== this._value) {
      this._rawValue = newValue;
      this._value = convert(this._rawValue)
      trigger(this, 'value')
    }
  }
}

export function ref(rawValue) {
  return new RefImpl(rawValue)
}

class ObjectRefImpl {
  constructor(proxy, key) {
    this._proxy = proxy;
    this._key = key
  }

  get value() {
    return this._proxy[this._key]
  }
  set value(newValue) {
    this._proxy[this._key] = newValue
  }
}

export function toRef(proxy, key) {
  return new ObjectRefImpl(proxy, key)
}


export function toRefs (proxy) {
  const ret = proxy instanceof Array ? new Array(proxy.length) : {}

  for (let key in proxy) {
    ret[key] = toRef(proxy, key)
  }
  return ret
}
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

<script type="module">
  import { reactive, watchEffect, ref, toRef, toRefs } from './reactive.js'
  const obj = reactive({
    name: 'qqq',
    age: 23
  })
  // let data = ref(1)
  // let data1 = toRef(obj, 'age')
  const { name, age } = toRefs(obj)
  watchEffect(() => {
    console.log(name.value);
    console.log(age.value);
    // console.log(obj.age);
    // console.log(data.value);
    // console.log(data1.value);
  })
  // obj.age++
  // data.value++
  obj.age++
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20