feat: support render function options

w2xi · Jan 26, 2024 · 2b0d77f · 2b0d77f
1 parent caf93aa
commit 2b0d77f
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 44 deletions.
diff --git a/demo/22-manually-mount.html b/demo/22-manually-mount.html
@@ -50,7 +50,7 @@
 }
 
 const vnode = render()
-console.log(vnode);
+console.log('VNode: ', vnode);
 mount(vnode, document.body)
 
 // vnode

diff --git a/demo/23-counter.html b/demo/23-counter.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>A counter</title>
   <script src="./static/mini-vue.umd.js"></script>
   <style>
     .demo {

diff --git a/demo/24-render-function-options.html b/demo/24-render-function-options.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>render function options</title>
+  <script src="./static/mini-vue.umd.js"></script>
+  <style>
+    .demo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .count {
+      margin: 0 15px;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    const { createApp, ref, h } = MiniVue
+    const count = ref(0)
+
+    createApp({
+      setup() {
+        const plus = () => {
+          count.value++
+        }
+        const minus = () => {
+          count.value--
+        }
+        return {
+          count,
+          plus,
+          minus
+        }
+      },
+      render(props) {
+        const { count, plus, minus } = props
+        return h('div', { class: 'demo'}, [
+            h('button', { onClick() { minus() } }, '-1'),
+            h('span', { class: 'count' }, count),
+            h('button', { onClick() { plus() } }, '+1')
+        ])
+      }
+    }).mount('#app')
+  </script>
+</body>
+</html>
diff --git a/demo/static/mini-vue.umd.js b/demo/static/mini-vue.umd.js
diff --git a/slides.md b/slides.md
@@ -2265,7 +2265,7 @@ function mount(vnode, container) {
 // demo: 22-manually-mount.html
 
 const vnode = render()
-console.log(vnode);
+console.log('VNode: ', vnode);
 mount(vnode, document.body)
 ```
 
@@ -2322,7 +2322,7 @@ function createApp(options = {}) {
 
 ---
 
-## Counter 计数器 demo
+## Counter 计数器
 
 demo: `22-counter.html`
 
@@ -2362,6 +2362,32 @@ createApp({
 
 </div>
 
+---
+
+## 手写 render 函数
+
+我们知道，在 Vue.js 中，可以手写 `render` 渲染函数，接下里我们也来支持下。
+
+```js
+// demo: 24-render-function-options.html
+
+function createApp(options = {}) {
+  const app = {
+    mount(container) {
+      // ...
+      let render
+      if (isFunction(options.render)) { // 传入 render 函数
+        render = options.render
+      } else {
+        render = compileToFunction(template)
+      }
+      // ...
+    }
+  }
+  return app
+}
+```
+
 ---
 layout: image
 image: /mikoto-misaka.jpg