refactor: onEvent

example/componentUpdate/App.js

@@ -1,7 +1,7 @@
 // 在 render 中使用 proxy 调用 emit 函数
 // 也可以直接使用 this
 // 验证 proxy 的实现逻辑
-import { h, ref, reactive } from "../../lib/mini-vue.esm.js";
+import { h, ref } from "../../lib/mini-vue.esm.js";
 import Child from "./Child.js";
 
 export default {

src/runtime-dom/index.ts

@@ -1,5 +1,8 @@
 // 源码里面这些接口是由 runtime-dom 来实现
 // 这里先简单实现
+
+import { isOn } from "../shared";
+
 // 后面也修改成和源码一样的实现
 export function hostCreateElement(type) {
   console.log("hostCreateElement", type);
@@ -27,6 +30,41 @@ export function hostPatchProp(el, key, preValue, nextValue) {
   console.log(`hostPatchProp 设置属性:${key} 值:${nextValue}`);
   console.log(`key: ${key} 之前的值是:${preValue}`);
 
+  // TODO
+  // 需要参考 runtime-dom 的做法
+  // 这里需要额外的处理 nextValue 的值
+  // 因为 nextValue 是一个匿名函数的话，那么对比的时候，肯定2个匿名函数就不一样了
+  // 然后就会注册了2遍事件监听
+
+  if (isOn(key)) {
+    // 添加事件处理函数的时候需要注意一下
+    // 添加的和删除的必须是一个函数，不然的话 删除不掉
+    // 那么就需要把之前 add 的函数给存起来，后面删除的时候需要用到
+    // 存储所有的事件函数
+    const invokers = el._vei || (el._vei = {});
+    const existingInvoker = invokers[key];
+    if (nextValue && existingInvoker) {
+      // patch
+      // 直接修改函数的值即可
+      existingInvoker.value = nextValue;
+    } else {
+      const eventName = key.slice(2).toLowerCase();
+      if (nextValue) {
+        const invoker = (invokers[key] = nextValue);
+        el.addEventListener(eventName, invoker);
+      } else {
+        el.removeEventListener(eventName, existingInvoker);
+        invokers[key] = undefined;
+      }
+    }
+  } else {
+    if (nextValue === null || nextValue === "") {
+      el.removeAttribute(key);
+    } else {
+      el.setAttribute(key, nextValue);
+    }
+  }
+
   switch (key) {
     case "id":
     case "tId":

src/shared/index.ts

@@ -15,6 +15,9 @@ export const camelize = (str: string): string => {
 
 export const extend = Object.assign;
 
+// 必须是 on+一个大写字母的格式开头
+export const isOn = (key) => /^on[A-Z]/.test(key);
+
 export function hasChanged(value, oldValue) {
   return !Object.is(value, oldValue);
 }