demo: add componentUpdate

cuixiaorui · cuixiaorui · commit 1cf5c2020a80 · 2021-03-03T19:08:39.000+08:00
diff --git a/example/componentUpdate/App.js b/example/componentUpdate/App.js
@@ -0,0 +1,34 @@
+// 在 render 中使用 proxy 调用 emit 函数
+// 也可以直接使用 this
+// 验证 proxy 的实现逻辑
+import { h, ref, reactive } from "../../lib/mini-vue.esm.js";
+import Child from "./Child.js";
+
+export default {
+  name: "App",
+  setup() {
+    const msg = ref("123");
+
+    const changeChildProps = () => {
+      msg.value = "456";
+    };
+
+    return { msg, changeChildProps };
+  },
+
+  render() {
+    return h("div", {}, [
+      h("div", {}, "你好"),
+      h(
+        "button",
+        {
+          onClick: this.changeChildProps,
+        },
+        "change child props"
+      ),
+      h(Child, {
+        msg: this.msg,
+      }),
+    ]);
+  },
+};
diff --git a/example/componentUpdate/Child.js b/example/componentUpdate/Child.js
@@ -0,0 +1,9 @@
+import { h, ref, reactive } from "../../lib/mini-vue.esm.js";
+export default {
+  name: "Child",
+  setup(props, { emit }) {},
+  render(proxy) {
+    const self = this;
+    return h("div", {}, [h("div", {}, "child")]);
+  },
+};
diff --git a/example/componentUpdate/index.html b/example/componentUpdate/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import { createApp } from "../../../lib/mini-vue.esm.js";
+      import App from "./App.js";
+
+      const rootContainer = document.querySelector("#app");
+      createApp(App).mount(rootContainer);
+    </script>
+  </body>
+</html>
