feat: add update logic

example/App.js

@@ -1,11 +1,37 @@
-import { h } from "../lib/mini-vue.esm.js";
-import HelloWorld from "./components/HelloWorld.js";
+import { h,ref } from "../lib/mini-vue.esm.js";
+// import HelloWorld from "./components/HelloWorld.js";
+// import { h, ref } from "../../lib/mini-vue.esm.js";
+
+const count = ref(1);
+const HelloWorld = {
+  name: "HelloWorld",
+  setup() {},
+  render() {
+    return h(
+      "div",
+      { tId: "helloWorld" },
+      `hello world: count: ${count.value}`
+    );
+  },
+};
 
 export default {
-    name:"App",
+  name: "App",
   setup() {},
 
   render() {
-    return h("div", { tId: 1 }, [h("p", {}, "你好，我是p"), h(HelloWorld)]);
+    return h("div", { tId: 1 }, [
+      h("p", {}, "你好，我是p"),
+      h(
+        "button",
+        {
+          onclick: () => {
+            count.value++;
+          },
+        },
+        "点我啊！"
+      ),
+      h(HelloWorld),
+    ]);
   },
 };

example/components/HelloWorld.js

@@ -1,8 +1,16 @@
-import { h } from "../../lib/mini-vue.esm.js";
+import { h, ref } from "../../lib/mini-vue.esm.js";
+
+// 临时模拟使用 refs
+// 后面需要支持在 setup 内导出
+// 然后在 render 内导入
+// 这需要实现 proxy
+
+const count = ref(1);
+window.count = count;
 export default {
   name: "HelloWorld",
   setup() {},
   render() {
-    return h("div", { tId: "helloWorld" }, "hello world vue3");
+    return h("div", { tId: "helloWorld" }, `hello world: count: ${count.value}`);
   },
 };

example/main.js

@@ -1,4 +1,4 @@
-import { createApp } from "../lib/mini-vue.esm.js";
+import {createApp} from "../lib/mini-vue.esm.js";
 import App from "./App.js";
 
 const rootContainer = document.querySelector("#root");