feat: add component.proxy

src/runtime-core/component.ts

@@ -1,5 +1,6 @@
 import { initProps } from "./componentProps";
 import { emit } from "./componentEmits";
+import { PublicInstanceProxyHandlers } from "./componentPublicInstance";
 export function createComponentInstance(vnode) {
   const instance = {
     type: vnode.type,
@@ -9,9 +10,16 @@ export function createComponentInstance(vnode) {
     isMounted: false,
     attrs: {}, // 存放 attrs 的数据
     slots: {}, // 存放插槽的数据
+    ctx: {}, // context 对象
     emit: () => {},
   };
 
+  // 在 prod 坏境下的 ctx 只是下面简单的结构
+  // 在 dev 环境下会更复杂
+  instance.ctx = {
+    _: instance,
+  };
+
   // 赋值 emit
   // 这里使用 bind 把 instance 进行绑定
   // 后面用户使用的时候只需要给 event 和参数即可
@@ -45,6 +53,11 @@ function setupStatefulComponent(instance) {
   // todo
   // 1. 先创建代理 proxy
   console.log("创建 proxy");
+
+  // proxy 对象其实是代理了 instance.ctx 对象
+  // 我们在使用的时候需要使用 instance.proxy 对象
+  // 因为 instance.ctx 在 prod 和 dev 坏境下是不同的
+  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers);
   // 用户声明的对象就是 instance.type
   // const Component = {setup(),render()} ....
   const Component = instance.type;

src/runtime-core/componentPublicInstance.ts

@@ -0,0 +1,19 @@
+const publicPropertiesMap = {
+  // 当用户调用 instance.proxy.$emit 时就会触发这个函数
+  $emit: (i) => i.emit,
+};
+
+export const PublicInstanceProxyHandlers = {
+  get({ _: instance }, key) {
+    // 用户访问 proxy[key]
+    // 这里就匹配一下看看是否有对应的 function
+    // 有的话就直接调用这个 function
+    console.log("触发 proxy 的 hook");
+
+    const publicGetter = publicPropertiesMap[key];
+
+    if (publicGetter) {
+      return publicGetter(instance);
+    }
+  },
+};