# vue3demo

**Repository Path**: chanchaw/vue3demo

## Basic Information

- **Project Name**: vue3demo
- **Description**: 学习 vue3 教程跟做项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-05-15
- **Last Updated**: 2022-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 第一课：响应式对象

在 defaultComponent 中的 setup 是 vue3 新增的特性，意思在启动后进行的初始化工作，行号20 是创建一个响应式对象，即双向绑定的对象，并且初始化为0，可见 ref 是用于创建响应式对象的。在行号27处返回该响应式对象，所以行号3可以通过插值表达式显示到UI上。行号21创建了按钮的点击事件执行的逻辑，对应到行号4.行号24使用了计算属性，对应到行号5.实际在行号12也要 import  computed 属性。注意都要在 setup 后面的 return 中返回。下面是制作后的运行起来的效果

### 第二课：reactive集中管理

使用 reactive 集中管理响应式对象和方法，即使用 reactive 实现第一课的效果，有几个注意点：

1. 记得 import reactive 和 toRefs ，前者是集中管理时用到，后者是将一个对象的各个属性转换为响应式对象
2. 最终使用 toRefs 将 reactive 构建的对象转换为响应式对象
3. 最后通过 return 导出时使用展开符（三个点）进行返回

那么在 reactive 中的所有属性和方法都视作是属性中间以英文逗号间隔，最终模板代码不用修改，沿用第一课时的模板代码即可。

### 第三课：生命周期钩子的使用

在 script 标签下通过 import 引入生命周期钩子的函数，然后在 setup 中为钩子方法实现业务逻辑即可

### 第四课：watch 的使用

setup 函数只会执行一次，在其中的赋值操作只被执行一次，如果要求网页标题变动需要将 document.title = xxx 当到 watch 中，赋值号右边为响应式对象的 value ，这样在响应式对象变动时同时会更改网页标题中的问题。watch 用于监控响应式对象的变动，可以监控数组，即可以同时监控多个响应式对象，第一个参数为监控的对象（或者对象数组），第二个参数是实现业务逻辑的方法，该方法有两个参数第一个是 newValue 第二个是 oldValue，如果被监控的是响应式对象数组，那么 newValue 一样是数组

### 第五课：功能模块化

在 src 下创建目录 hooks ，然后在该目录下创建名称为 useMousePosition.ts 的文件，其中的函数也同名，最后记得通过 export default useMousePosition 导出。按照此方法将功能模块独立出来，然后在需要的业务组件中 import 后就可以使用其返回值了，注意返回值也是响应式的。示例参照 scr/hooks/useMousePosition

### 第六课：axios 的 http 请求

使用命令 npm install axios --save 安装，在需要的地方引用 import axios from 'axios'; 具体使用见本分支的 useURLLoader 功能模块，在 hooks 目录下

### 第七课：teleport传送门的使用

本知识点的案例见自定义组件 Modal.vue ，其中使用 teleport 将 div 包裹起来并指定传送到 id 是 modal 的 dom 节点上，该 id 的节点可以和 vue 项目的 app 节点同级。本案例中该节点在文件 /public/index.html 中

### 第八课：调用自定义组件

子组件使用 defineComponent 进行定义导出，其中的 props 表示暴露出来的属性，如果有要暴露出来的事件要在 props 后面使用 emmits:{}。在父组件中通过 import 导入，还要在父组件的 components 中声明，最终在模板代码中调用显示注意名称应该用小写，不要用大写，即应该是

```html
<modal :msg="test"/> <!-- 前面的 modal 不要大写m -->
```



![自定义组件](https://images.gitee.com/uploads/images/2021/0516/115828_a50a4804_1230939.jpeg)

### 第九课：父子组件通信

要暴露出的属性写在子组件的属性 props 中，要暴露的事件写在子组件的 emits 中，看源码的 Modal.vue 的行号16开始，子组件模板代码中使用 slot 应用属性，并要在 setup 中制作子组件的事件其中要关联 emits 中暴露的事件，这样在子组件中的事件可以传递到父组件执行逻辑，即实现了父子组件的通信。
父组件 App.vue 中的 setup 中声明4个属性用于传递到子组件 Modal.vue，注意属性都要使用响应式对象，在父组件模板代码中的15行将父组件的响应式属性绑定到子组件暴露出的属性上，同时绑定父组件的事件到子组件暴露出的事件上。本案例在第八课的基础上制作父子组件的通信，看两处代码：Modal.vue 和 App.vue

![父子组件通信](https://images.gitee.com/uploads/images/2021/0516/115843_48b95e66_1230939.jpeg)

### 第十课：Suspense 显示异步组件

本课程对应源码的 AsyncShow.vue 以及 App.vue 中的调用。子组件中使用 promise 返回异步对象，在模板代码中可以直接使用异步的结果属性 result 。App.vue 中调用异步组件时使用 Suspense ，其中默认显示正常结果的插槽和显示异常的插槽，看 App.vue 的行号19.