Reflect<\/a><\/li>\n<\/ul>\nReflect \u5c5e\u6027, \u591a\u6570\u65f6\u5019\u4f1a\u4e0e proxy \u914d\u5408\u8fdb\u884c\u4f7f\u7528\u5728 MDN Proxy \u7684\u4f8b\u5b50\u4e2d, Reflect \u4e5f\u6709\u5bf9\u6b64\u51fa\u73b0\u3002<\/p>\n
const odj = {\n name: "\u5f20",\n };\n console.log(obj.name)\/\/\u5f20\u4e09\n console.log(Reflect.get(obj,'name'))\/\/\u5f20\u4e09<\/code><\/pre>\n\u7531\u4ee5\u4e0a\u4ee3\u7801\u53ef\u4ee5\u53d1\u73b0\uff0c\u4e24\u6b21\u6253\u5370\u7684\u7ed3\u679c\u662f\u76f8\u540c\u7684\u3002\u8fd9\u5176\u5b9e\u4e5f\u5c31\u8bf4\u660e\u4e86
\u90a3\u4e3a\u5565\u8fd8\u9700\u8981 Reflect \u5462? \u5176\u8fd8\u6709\u7b2c\u4e09\u4e2a\u53c2\u6570 receiver, \u5b98\u7f51\u4ecb\u7ecd\uff1a\u5982\u679c target \u5bf9\u8c61\u4e2d\u6307\u5b9a\u4e86 getter\uff0creceiver \u5219\u4e3a getter \u8c03\u7528\u65f6\u7684 this \u503c\u3002<\/strong>\uff08Reflect \u53ef\u4ee5\u4fee\u6539 this \u6307\u5411\uff09<\/p>\n <script>\n const p1 = {\n lastName: "\u5f20",\n firstName: "\u4e09",\n \/\/\u901a\u8fc7 get \u6807\u8bc6\u7b26\u6807\u8bb0, \u53ef\u4ee5\u8ba9\u65b9\u6cd5\u7684\u8c03\u7528\u50cf\u5c5e\u6027\u7684\u8c03\u7528\u4e00\u6837\n get fullName() {\n return this.lastName + this.firstName;\n },\n };\n\n const p2 = {\n lastName: "\u674e",\n firstName: "\u56db",\n get fullName() {\n return this.lastName + this.firstName; \/\/ \u2193---\u89e6\u53d1 2 \u6b21\n },\n };\n \/**\n * \u7b2c\u4e09\u4e2a\u53c2\u6570 receiver \u5728\u5bf9\u8c61\u6307\u5b9a\u4e86 getter \u65f6\u8868\u793a\u4e3a this\n * \u5229\u7528 p2 \u4f5c\u4e3a\u7b2c\u4e09\u4e2a\u53c2\u6570 receiver, \u4ee5\u6b64\u6765\u4fee\u6539 fullName \u7684\u6253\u5370\u7ed3\u679c\u3002\n * \u5373\uff1a\u6b64\u65f6\u89e6\u53d1\u7684 fullName \u4e0d\u662f p1 \u7684\u800c\u662f p2 \u7684\n * *\/\n console.log(Reflect.get(p1, "name", p2)); \/\/\u674e\u56db\n\n const proxy = new Proxy(p1, {\n \/\/target:\u88ab\u4ee3\u7406\u5bf9\u8c61 receiver:\u4ee3\u7406\u5bf9\u8c61\n get(target, key, receiver) {\n console.log("getter \u884c\u4e3a\u88ab\u89e6\u53d1");\n \/\/ return target[key];\/\/1 \u6b21\n return Reflect.get(target, key, receiver); \/\/\u89e6\u53d1 3 \u6b21\n },\n });\n console.log(proxy.fullName); \/\/\u5f20\u4e09 ---\u2191\u89e6\u53d1 1 \u6b21\n \/\/\u601d\u8003:\u4f7f\u7528 return target[key]; getter \u884c\u4e3a\u5e94\u8be5\u88ab\u89e6\u53d1\u51e0\u6b21? 3 \u6b21, \u5b9e\u9645\u89e6\u53d1\u4e00\u6b21\n <\/script><\/code><\/pre>\n\u603b\u7ed3<\/h4>\n \u5f53\u6211\u4eec\u671f\u671b\u76d1\u542c\u4ee3\u7406\u5bf9\u8c61\u7684 getter \u548c setter \u65f6, \u4e0d\u5e94\u8be5\u4f7f\u7528 target[key]<\/strong>, \u56e0\u4e3a\u5b83\u5728\u67d0\u4e9b\u65f6\u523b(\u6bd4\u5982 fullName) \u4e0b\u662f\u4e0d\u53ef\u9760\u7684\u3002\u5e94\u8be5\u4f7f\u7528 Reflect, \u501f\u52a9\u5b83\u7684 get \u548c set \u65b9\u6cd5, \u4f7f\u7528 receiver ( proxy \u5b9e\u4f8b ) \u4f5c\u4e3a this, \u5df2\u8fbe\u5230\u671f\u671b\u7684\u7ed3\u679c\uff08\u89e6\u53d1\u4e09\u6b21 getter\uff09<\/p>\n\u521d\u89c1 reactivity \u6a21\u5757<\/h2>\n\u9605\u8bfb\u6e90\u7801????<\/h3>\n\u6784\u5efa reactive \u51fd\u6570, \u83b7\u53d6 proxy \u5b9e\u4f8b<\/h3>\n\n\u6574\u4e2a reactive \u51fd\u6570\uff0c\u672c\u8d28\u4e0a\u662f\u8fd4\u56de\u4e86\u4e00\u4e2a proxy \u5b9e\u4f8bimport { mutableHandlers } from '.\/baseHandlers'\n\n\/**\n * \u54cd\u5e94\u6027 Map \u7f13\u5b58\u5bf9\u8c61\n * key:target\n * val:proxy\n *\/\nexport const reactiveMap = new WeakMap<object, any>()\n\n\/**\n * \u4e3a\u590d\u6742\u6570\u636e\u7c7b\u578b, \u521b\u5efa\u54cd\u5e94\u5f0f\u5bf9\u8c61\n * @param target \u88ab\u4ee3\u7406\u7684\u5bf9\u8c61\n * @returns \u4ee3\u7406\u5bf9\u8c61\n *\/\nexport function reactive(target: object) {\n return createReactiveObject(target, mutableHandlers, reactiveMap)\n}\n\n\/**\n * \u521b\u5efa\u54cd\u5e94\u5f0f\u5bf9\u8c61\n * @param target \u88ab\u4ee3\u7406\u5bf9\u8c61\n * @param baseHandlers handler\n * @param proxyMap\n *\/\nfunction createReactiveObject(\n target: object,\n baseHandlers: ProxyHandler<any>,\n proxyMap: WeakMap<object, any>\n) {\n \/\/\u5982\u679c\u8be5\u5b9e\u4f8b\u5df2\u7ecf\u88ab\u4ee3\u7406, \u5219\u76f4\u63a5\u8bfb\u53d6\u5373\u53ef\n const existingProxy = proxyMap.get(target)\n if (existingProxy) {\n return existingProxy\n }\n \/\/\u672a\u88ab\u4ee3\u7406\u5219\u751f\u6210 proxy \u5b9e\u4f8b\n const proxy = new Proxy(target, baseHandlers)\n\n \/\/\u7f13\u5b58\u4ee3\u7406\u5bf9\u8c61\n proxyMap.set(target, proxy)\n return proxy\n}\n<\/code><\/pre>\n2.\u521b\u5efa packages\/reactivity\/src\/baseHandlers.ts<\/p>\n
\/**\n * \u54cd\u5e94\u6027\u7684 handler\n *\/\nexport const mutableHandlers: ProxyHandler<object> = {}<\/code><\/pre>\n3.\u521b\u5efa packages\/reactivity\/src\/index.ts ,\u4f5c\u4e3a reactivity \u7684\u5165\u53e3\u6a21\u5757<\/p>\n
export { reactive } from '.\/reactive'<\/code><\/pre>\n4.\u521b\u5efa packages\/vue\/src\/index.ts ,\u5bfc\u5165 reactivity \u6a21\u5757<\/p>\n
export { reactive } from '@vue\/reactivity'<\/code><\/pre>\n5.\u6267\u884c build \u6253\u5305, \u751f\u6210 vue.js
WeakMap \u548c Map \u6709\u4ec0\u4e48\u533a\u522b?<\/h3>\n \u6838\u5fc3\u5171\u540c\u70b9\uff1a\u90fd\u662f{key,value}\u7684\u7ed3\u6784\u5bf9\u8c61<\/p>\n
\u5bf9\u4e8e WeakMap \u800c\u8a00,<\/p>\n
\nkey \u5fc5\u987b\u662f\u5bf9\u8c61<\/li>\n key \u662f\u5f31\u5f15\u7528\u7684<\/li>\n<\/ul>\n\u5f31\u5f15\u7528\uff1a\u4e0d\u4f1a\u5f71\u54cd\u5783\u573e\u56de\u6536\u673a\u5236\u3002\u5373\uff1aWeakMap \u7684 key \u4e0d\u518d\u5b58\u5728\u4efb\u4f55\u5f15\u7528\u65f6<\/strong>, \u4f1a\u88ab\u76f4\u63a5\u56de\u6536\u4e0d\u4f1a<\/strong>\u88ab\u56de\u6536<\/p>\n\u521b\u5efa createGettter \u548c createSetter<\/h3>\n packages\/reactivity\/src\/baseHandlers.ts<\/p>\n
\/**\n * \u54cd\u5e94\u6027\u7684 handler\n *\/\nimport { track, trigger } from '.\/effect'\n\nconst get = createGetter()\nfunction createGetter() {\n return function get(target: object, key: string | symbol, receiver: object) {\n const res = Reflect.get(target, key, receiver)\n track(target, key)\n return res\n }\n}\n\nconst set = createSetter()\nfunction createSetter() {\n return function set(\n target: object,\n key: string | symbol,\n value: unknown,\n receiver: object\n ) {\n const result = Reflect.set(target, key, value, receiver)\n trigger(target, key, value)\n return result\n }\n}\n\nexport const mutableHandlers: ProxyHandler<object> = {\n get,\n set\n}<\/code><\/pre>\n\u8bbe\u7f6e\u70ed\u66f4\u65b0<\/h3>\n "dev": "rollup -c -w",<\/p>\n
\u6784\u5efa effect \u51fd\u6570, \u751f\u6210 ReactiveEffect<\/h3>\nexport function effect<T = any>(fn: () => T) {\n const _effect = new ReactiveEffect(fn)\n _effect.run()\n}\n\nexport let activeEffect: ReactiveEffect | undefined\n\nexport class ReactiveEffect<T = any> {\n constructor(public fn: () => T) {}\n run() {\n \/\/\u5f53\u524d\u88ab\u6fc0\u6d3b\u7684 effect \u5b9e\u4f8b\n activeEffect = this\n return this.fn() \/\/\u5b8c\u6210\u7b2c\u4e00\u6b21 getter \u884c\u4e3a\u7684\u89e6\u53d1\n }\n}<\/code><\/pre>\n\n\u6210\u529f\u6e32\u67d3\u4e86\u6570\u636e\u5230 html \u4e2d<\/li>\n<\/ul>\n<body>\n<div id="app"><\/div>\n<\/body>\n<script>\n const { reactive,effect } = Vue\n const obj=reactive({\n name:'\u5f20\u4e09'\n })\n effect(()=>{\n document.querySelector('#app').innerText=obj.name\n })\n<\/script><\/code><\/pre>\ntrack \u548c trigger<\/h3>\n \u7531 baseHandlers.ts \u4e2d\u4ee3\u7801\u53ef\u77e5: \u5f53\u89e6\u53d1 getter \u884c\u4e3a\u65f6, \u5176\u5b9e\u6211\u4eec\u4f1a\u89e6\u53d1 track \u65b9\u6cd5, \u8fdb\u884c\u4f9d\u8d56\u6536\u96c6<\/strong>, \u5f53\u89e6\u53d1 setter \u884c\u4e3a\u65f6, \u4f1a\u89e6\u53d1 trigger \u65b9\u6cd5, \u6765\u89e6\u53d1\u4f9d\u8d56<\/strong><\/p>\n\n\u54cd\u5e94\u6027\u6307\u7684\u662f: \u5f53\u54cd\u5e94\u6027\u6570\u636e\u89e6\u53d1 setter \u65f6\u6267\u884c fn \u51fd\u6570, <\/li>\n \u60f3\u8981\u8fbe\u5230\u8fd9\u6837\u7684\u76ee\u7684, \u5c31\u5fc5\u987b\u5728getter \u65f6\u80fd\u591f\u6536\u96c6\u5f53\u524d\u7684 fn \u51fd\u6570<\/strong>, \u4ee5\u4fbf setter \u7684\u65f6\u5019\u53ef\u4ee5\u6267\u884c\u5bf9\u5e94\u7684 fn \u51fd\u6570<\/li>\n<\/ul>\n\u4f46\u662f\u5bf9\u4e8e\u6536\u96c6\u800c\u8a00, \u5982\u679c\u4ec5\u4ec5\u662f\u628a fn \u5b58\u8d77\u6765\u8fd8\u662f\u4e0d\u591f\u7684, \u6211\u4eec\u8fd8\u9700\u8981\u77e5\u9053, \u5f53\u524d\u7684\u8fd9\u4e2a fn \u662f\u54ea\u4e2a\u54cd\u5e94\u5f0f\u6570\u636e\u5bf9\u8c61<\/strong>\u7684\u54ea\u4e2a\u5c5e\u6027<\/strong>\u5bf9\u5e94\u7684, \u53ea\u6709\u8fd9\u6837, \u6211\u4eec\u624d\u53ef\u4ee5\u5728 \u8be5\u5c5e\u6027<\/strong>\u89e6\u53d1 setter \u7684\u65f6\u5019, \u51c6\u786e\u7684\u6267\u884c\u54cd\u5e94\u6027<\/p>\n\u5982\u4f55\u8fdb\u884c\u4f9d\u8d56\u6536\u96c6<\/h4>\n WeakMap :
\/\/effect.ts\ntype KeyToDepMap = Map<any, ReactiveEffect>\n\/**\n * \u6536\u96c6\u6240\u6709\u4f9d\u8d56\u7684 WeakMap \u5b9e\u4f8b\n * key: \u54cd\u5e94\u6027\u5bf9\u8c61\n * value: Map \u5bf9\u8c61\n * key: \u54cd\u5e94\u6027\u5bf9\u8c61\u7684\u6307\u5b9a\u5c5e\u6027\n * value:\u6307\u5b9a\u5bf9\u8c61\u7684\u6307\u5b9a\u5c5e\u6027\u7684\u6267\u884c\u51fd\u6570\n *\/\nconst targetMap = new WeakMap<any, KeyToDepMap>()\n\n\/**\n * \u6536\u96c6\u4f9d\u8d56\n * @param target WeakMap \u7684 key\n * @param key key \u4ee3\u7406\u5bf9\u8c61\u7684 key, \u5f53\u4f9d\u8d56\u88ab\u89e6\u53d1\u65f6,\u9700\u8981\u6839\u636e\u8be5 key \u83b7\u53d6\n *\/\nexport function track(target: object, key: unknown) {\n if (!activeEffect) return\n \/\/\u5c1d\u8bd5\u4ece targetMap \u4e2d, \u6839\u636e target \u83b7\u53d6 map\n let depsMap = targetMap.get(target)\n \/\/\u5982\u679c\u83b7\u53d6\u5230\u7684 map \u4e0d\u5b58\u5728,\u5219\u751f\u6210\u65b0\u7684 map \u5bf9\u8c61, \u5e76\u628a\u8be5\u5bf9\u8c61\u8d4b\u503c\u7ed9\u5bf9\u5e94\u7684 value\n if (!depsMap) {\n targetMap.set(target, (depsMap = new Map()))\n }\n \/\/\u4e3a\u6307\u5b9a map, \u6307\u5b9a key, \u8bbe\u7f6e\u56de\u8c03\u51fd\u6570\n depsMap.set(key, activeEffect)\n console.log(targetMap)\n}<\/code><\/pre>\ntrigger \u89e6\u53d1\u4f9d\u8d56<\/h4>\n\/**\n * \u89e6\u53d1\u4f9d\u8d56\n * @param target WeakMap \u7684 key\n * @param key key \u4ee3\u7406\u5bf9\u8c61\u7684 key, \u5f53\u4f9d\u8d56\u88ab\u89e6\u53d1\u65f6,\u9700\u8981\u6839\u636e\u8be5 key \u83b7\u53d6\n *\/\nexport function trigger(target: object, key: unknown, newValue: unknown) {\n \/\/\u4f9d\u636e target \u83b7\u53d6\u5b58\u50a8\u7684 map \u5b9e\u4f8b\n const depsMap = targetMap.get(target)\n if (!depsMap) {\n return\n }\n \/\/\u4f9d\u636e key, \u4ece depsMap \u4e2d\u53d6\u51fa value, \u8be5 value \u662f\u4e00\u4e2a ReactiveEffect \u7c7b\u578b\u7684\u6570\u636e\n const effect = depsMap.get(key) as ReactiveEffect\n if (!effect) {\n return\n }\n \/\/\u6267\u884c effect \u4e2d\u4fdd\u5b58\u7684 fn \u51fd\u6570\n effect.fn()\n}<\/code><\/pre>\n\n\u8fd9\u6837\u5c31\u53ef\u4ee5\u89e6\u53d1 setter \u65f6, \u6267\u884c\u4fdd\u5b58\u7684 fn \u51fd\u6570\u4e86<\/li>\n<\/ul>\n\u6784\u5efa Dep \u6a21\u5757, \u5904\u7406\u4e00\u5bf9\u591a\u7684\u4f9d\u8d56\u5173\u7cfb<\/h3>\n <div id="app">\n <p id="p1"><\/p>\n <p id="p2"><\/p>\n<\/div>\n effect(()=>{\n document.querySelector('#p1').innerText=obj.name\n })\n effect(()=>{\n document.querySelector('#p2').innerText=obj.name\n })<\/code><\/pre>\nname \u5c5e\u6027\u5bf9\u5e94\u4e24\u4e2a DOM \u7684\u53d8\u5316, \u4f46\u662f p1 \u7684\u66f4\u65b0\u6e32\u67d3\u662f\u65e0\u6548\u7684
reactive('\u5f20\u4e09')\u4e0d\u80fd\u63a5\u6536\u7b80\u5355\u6570\u636e\u7c7b\u578b<\/h4>\n \n\u5bf9\u4e8e\u6211\u4eec reactive \u7684 effect \u800c\u8a00, \u6700\u7ec8\u751f\u6210\u4e00\u4e2a proxy \u5b9e\u4f8b, \u5176\u4e2d\u7b2c\u4e00\u4e2a\u53c2\u6570\u5fc5\u987b\u662f\u4e00\u4e2a\u5bf9\u8c61(\u88ab\u4ee3\u7406\u5bf9\u8c61), \u5982\u679c\u662f\u7b80\u5355\u6570\u636e\u7c7b\u578b, \u662f\u6ca1\u6cd5\u4ee3\u7406\u7684<\/li>\n<\/ul>\n\u5bf9 reactive \u7684\u5c5e\u6027\u8fdb\u884c\u89e3\u6784, \u4e0d\u4f1a\u5177\u5907\u54cd\u5e94\u6027<\/h3>\n<script>\n const { reactive,effect } = Vue\n const obj=reactive({\n name:'\u5f20\u4e09'\n })\n let {name}=obj\n console.log('name',name);\n\n effect(()=>{\n document.querySelector('#app').innerText=name\n })\n setTimeout(()=>{\n obj.name='\u674e\u56db'\n\n console.log('obj',obj);\n },2000)\n<\/script><\/code><\/pre>\nreactive \u603b\u7ed3<\/h2>\n \u5bf9\u4e8e reactive \u7684\u54cd\u5e94\u6027\u51fd\u6570\u800c\u8a00, <\/p>\n
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020123113529.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020123140650.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020214552428.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020222275218.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020322555426.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/20260203230849100.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020517010190.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020521183580.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020521194047.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020521222717.png\")
![\"\"](\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2026\/02\/2026020521265022.png\")