doc
This commit is contained in:
zxfjd3g
@@ -1,194 +0,0 @@
|
||||
# 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>
|
||||
```
|
||||
38
docs/chapter3/01_认识Vue3.md
Normal file
38
docs/chapter3/01_认识Vue3.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# 1. 认识Vue3
|
||||
|
||||
## 1) 了解相关信息
|
||||
|
||||
- Vue.js 3.0 "One Piece" 正式版在今年9月份发布
|
||||
- 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR
|
||||
- ***Vue3支持vue2的大多数特性***
|
||||
- ***更好的支持Typescript***
|
||||
|
||||
|
||||
|
||||
## 2) 性能提升:
|
||||
|
||||
- 打包大小减少41%
|
||||
- 初次渲染快55%, 更新渲染快133%
|
||||
- 内存减少54%
|
||||
- ***使用Proxy代替defineProperty实现数据响应式***
|
||||
- ***重写虚拟DOM的实现和Tree-Shaking***
|
||||
|
||||
|
||||
|
||||
## 3) *Composition(组合) API* Option API
|
||||
|
||||
- setup
|
||||
- ref 和 reactive
|
||||
- computed 和 watch
|
||||
- 新的生命周期函数
|
||||
- provide与inject
|
||||
- ...
|
||||
|
||||
|
||||
|
||||
## 4) 其它新增特性
|
||||
|
||||
- Fragment - 文档碎片
|
||||
- Teleport - 瞬移组件的位置
|
||||
- Suspense - 异步加载组件的loading界面
|
||||
- 全局API的修改
|
||||
@@ -1,22 +0,0 @@
|
||||
# 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解析
|
||||
45
docs/chapter3/02_创建vue3项目.md
Normal file
45
docs/chapter3/02_创建vue3项目.md
Normal file
@@ -0,0 +1,45 @@
|
||||
# 2. 创建vue3项目
|
||||
|
||||
## 1) 使用 vue-cli 创建
|
||||
|
||||
文档: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
|
||||
|
||||
```bash
|
||||
## 安装或者升级
|
||||
npm install -g @vue/cli
|
||||
## 保证 vue cli 版本在 4.5.0 以上
|
||||
vue --version
|
||||
## 创建项目
|
||||
vue create my-project
|
||||
```
|
||||
|
||||
然后的步骤
|
||||
|
||||
- Please pick a preset - 选择 ***Manually select features***
|
||||
- Check the features needed for your project - 选择上 ***TypeScript*** ，特别注意点空格是选择，点回车是下一步
|
||||
- Choose a version of Vue.js that you want to start the project with - 选择 ***3.x (Preview)***
|
||||
- Use class-style component syntax - 直接回车
|
||||
- Use Babel alongside TypeScript - 直接回车
|
||||
- Pick a linter / formatter config - 直接回车
|
||||
- Use history mode for router? - 直接回车
|
||||
- Pick a linter / formatter config - 直接回车
|
||||
- Pick additional lint features - 直接回车
|
||||
- Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
|
||||
- Save this as a preset for future projects? - 直接回车
|
||||
|
||||
## 2) 使用 vite 创建
|
||||
|
||||
- 文档: https://v3.cn.vuejs.org/guide/installation.html
|
||||
|
||||
- vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，
|
||||
- 它做到了***本地快速开发启动***, 在生产环境下基于 Rollup 打包。
|
||||
- 快速的冷启动，不需要等待打包操作；
|
||||
- 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
|
||||
- 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。
|
||||
|
||||
```bash
|
||||
npm init vite-app <project-name>
|
||||
cd <project-name>
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
Reference in New Issue
Block a user