1.更新element流程搭建；2.更新element的props

daoyking · Jun 14, 2022 · 4a710fe · 4a710fe
1 parent 11b3f99
commit 4a710fe
Show file tree

Hide file tree

Showing 13 changed files with 636 additions and 133 deletions.
diff --git a/example/Update/App.js b/example/Update/App.js
@@ -0,0 +1,59 @@
+import { h,ref } from '../../lib/guide-mini-vue.esm.js'
+export const App = {
+  neme: 'App',
+  setup() {
+    const count = ref(0)
+
+    const onClick = () => {
+      count.value++
+    }
+    const props = ref({
+      foo: 'foo',
+      bar: 'bar'
+    })
+
+    const onChangePropsDemo1 = () => {
+      props.value.foo = 'new-foo'
+    }
+    const onChangePropsDemo2 = () => {
+      props.value.foo = undefined
+    }
+    const onChangePropsDemo3 = () => {
+      props.value = {
+        foo: 'foo'
+      }
+    }
+    return {
+      count,
+      onClick,
+      props,
+      onChangePropsDemo1,
+      onChangePropsDemo2,
+      onChangePropsDemo3
+    }
+  },
+  render() {
+    return h(
+      'div',
+      {
+        id: 'root',
+        ...this.props
+      },
+      [
+        h('div', {}, "count:" + this.count),
+        h('button', {
+          onClick: this.onClick,
+        }, 'click'),
+        h('button', {
+          onClick: this.onChangePropsDemo1,
+        }, 'changeProps - 值改变了 - 修改'),
+        h('button', {
+          onClick: this.onChangePropsDemo2,
+        }, 'changeProps - 值变成undefined - 删除'),
+        h('button', {
+          onClick: this.onChangePropsDemo3,
+        }, 'changeProps - 值改变了 - 删除'),
+      ]
+    )
+  }
+}
diff --git a/example/Update/index.html b/example/Update/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>update</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="./mian.js" type="module"></script>
+</body>
+
+</html>
diff --git a/example/Update/mian.js b/example/Update/mian.js
@@ -0,0 +1,5 @@
+import { createApp } from '../../lib/guide-mini-vue.esm.js'
+import { App } from './App.js'
+
+const rootContainer = document.querySelector('#app')
+createApp(App).mount(rootContainer)