doc

docs/chapter5/01_新组件.md

@@ -0,0 +1,194 @@
+# 1.  新组件
+
+## 1) Fragment(片断)
+
+- 在Vue2中: 组件必须有一个根标签
+- 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
+- 好处: 减少标签层级, 减小内存占用
+
+```vue
+<template>
+    <h2>aaaa</h2>
+    <h2>aaaa</h2>
+</template>
+```
+
+
+
+## 2) Teleport(瞬移)
+
+- Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示
+
+ModalButton.vue
+
+```vue
+<template>
+  <button @click="modalOpen = true">
+      Open full screen modal! (With teleport!)
+  </button>
+
+  <teleport to="body">
+    <div v-if="modalOpen" class="modal">
+      <div>
+        I'm a teleported modal! 
+        (My parent is "body")
+        <button @click="modalOpen = false">
+          Close
+        </button>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script>
+import { ref } from 'vue'
+export default {
+  name: 'modal-button',
+  setup () {
+    const modalOpen = ref(false)
+    return {
+      modalOpen
+    }
+  }
+}
+</script>
+
+
+<style>
+.modal {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  background-color: rgba(0,0,0,.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  width: 300px;
+  height: 300px;
+  padding: 5px;
+}
+</style>
+```
+
+App.vue
+
+```vue
+<template>
+  <h2>App</h2>
+  <modal-button></modal-button>
+</template>
+
+<script lang="ts">
+import ModalButton from './ModalButton.vue'
+
+export default {
+  setup() {
+    return {
+    }
+  },
+
+  components: {
+    ModalButton
+  }
+}
+</script>
+```
+
+
+
+## 3) Suspense(不确定的)
+
+- 它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验
+
+```vue
+<template>
+  <Suspense>
+    <template v-slot:default>
+      <AsyncComp/>
+      <!-- <AsyncAddress/> -->
+    </template>
+
+    <template v-slot:fallback>
+      <h1>LOADING...</h1>
+    </template>
+  </Suspense>
+</template>
+
+<script lang="ts">
+/* 
+异步组件 + Suspense组件
+*/
+// import AsyncComp from './AsyncComp.vue'
+import AsyncAddress from './AsyncAddress.vue'
+import { defineAsyncComponent } from 'vue'
+const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
+export default {
+  setup() {
+    return {
+     
+    }
+  },
+
+  components: {
+    AsyncComp,
+    AsyncAddress
+  }
+}
+</script>
+```
+
+- AsyncComp.vue
+
+```vue
+<template>
+  <h2>AsyncComp22</h2>
+  <p>{{msg}}</p>
+</template>
+
+<script lang="ts">
+
+export default {
+  name: 'AsyncComp',
+  setup () {
+    // return new Promise((resolve, reject) => {
+    //   setTimeout(() => {
+    //     resolve({
+    //       msg: 'abc'
+    //     })
+    //   }, 2000)
+    // })
+    return {
+      msg: 'abc'
+    }
+  }
+}
+</script>
+```
+
+- AsyncAddress.vue
+
+```vue
+<template>
+<h2>{{data}}</h2>
+</template>
+
+<script lang="ts">
+import axios from 'axios'
+export default {
+  async setup() {
+    const result = await axios.get('/data/address.json')
+    return {
+      data: result.data
+    }
+  }
+}
+</script>
+```

docs/chapter5/02_全局API更新.md

@@ -0,0 +1,22 @@
+# 2. 全局API更新
+## 全新的全局API
+- createApp()
+- defineProperty()
+- defineAsyncComponent()
+- nextTick()
+
+## 将原来的全局API转移到应用对象
+- app.component()
+- app.config()
+- app.directive()
+- app.mount()
+- app.unmount()
+- app.use()
+
+## 模板语法变化
+- v-model的本质变化
+  - prop：value -> modelValue；
+  - event：input -> update:modelValue；
+- .sync修改符已移除, 由v-model代替
+  - <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
+- v-if优先v-for解析