Vue3.0响应式原理模拟实现

## Vue3.0响应式原理模拟实现

### 1. 原理概述

Vue3.0 的响应式系统底层使用了 Proxy 对象实现，在初始化的时候不需要遍历所有的属性，再把属性通过 defineProperty 转化成 getter和setter，另外如果有多层属性嵌套的话，只有访问某个属性的时候才会递归处理下级的属性。

### 2. 模拟实现

class Dep {
constructor() {
this.subscribers = new Set()
}

depend() {
if (activeEffect) {
this.subscribers.add(activeEffect)
}
}

notify() {
this.subscribers.forEach(effect => {
effect()
})
}
}

const targetMap = new WeakMap()

function getDep(target, key) {
let dep = targetMap.get(target)
if (!dep) {
dep = new Dep()
targetMap.set(target, dep)
}
return dep
}

let activeEffect = null

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

function reactive(target) {
return new Proxy(target, {
get(target, key) {
const dep = getDep(target, key)
dep.depend()
return Reflect.get(target, key)
},
set(target, key, value) {
const dep = getDep(target, key)
const oldValue = Reflect.get(target, key)
const result = Reflect.set(target, key, value)
if (oldValue !== value) {
dep.notify()
}
return result
}
})
}

const state = reactive({
count: 0
})

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

state.count++ // 1
state.count = 2 // 2

### 3. 总结

本文通过模拟实现 Vue3.0 的响应式原理，帮助读者理解 Vue3.0 的响应式系统是如何工作的。