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()
})
}
}
const convert = val => (isObject(val) ? reactive(val) : val)
class RefImpl {
constructor(rawValue) {
this._rawValue = rawValue;
this.__v__isRef = true;
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
}
<script type="module">
import { reactive, watchEffect, ref, toRef, toRefs } from './reactive.js'
const obj = reactive({
name: 'qqq',
age: 23
})
const { name, age } = toRefs(obj)
watchEffect(() => {
console.log(name.value);
console.log(age.value);
})
obj.age++
</script>