vue3.x教程目录（TypeScript）-马育民老师

# 介绍

1. [vue介绍](https://www.malaoshi.top/show_1IXAFZmUi4Y.html "vue介绍")

2. [vscode vue插件](https://www.malaoshi.top/show_1IXOWj8UQpo.html "vscode vue插件")

# 创建Vue3工程

1. [Vite介绍](https://www.malaoshi.top/show_1GW1FEnpcdP9.html "Vite介绍")

2. [vue3.x教程-Vite 创建第一个vue3工程](https://www.malaoshi.top/show_1GW1FFfOHwus.html "vue3.x教程-Vite 创建第一个vue3工程")

3. [Vue3 工程文件、目录说明](https://www.malaoshi.top/show_1GW1GiXNsYUW.html "Vue3 工程文件、目录说明")

# 组合式api

- [vue3.x教程-选项式api和组合式 api](https://www.malaoshi.top/show_1GW3gMW7odWD.html "vue3.x教程-选项式api和组合式 api")

- [vue3.x教程-setup() 函数介绍](https://www.malaoshi.top/show_1GW3gMqYwTUb.html "vue3.x教程-setup() 函数介绍")

- [vue3.x教程-创建第一个页面-setup()函数实现](https://www.malaoshi.top/show_1GW1GieJ8Mqg.html "vue3.x教程-创建第一个页面-setup()函数实现")

- [vue3.x教程-创建第一个页面-setup语法糖、简化模块名（项目主流）](https://www.malaoshi.top/show_1GW1GkNgwczS.html "vue3.x教程-创建第一个页面-setup语法糖、简化模块名（项目主流）")

# 响应数据

1. [vue3.x 响应式数据-ref()、reactive()](https://www.malaoshi.top/show_1GW1GuBkTQTf.html "vue3.x 响应式数据-ref()、reactive()")

### ref()方式

1. [vue3.x 响应式数据-ref()方式-基本数据类型](https://www.malaoshi.top/show_1GW1GuDiWcWo.html "vue3.x 响应式数据-ref()方式-基本数据类型")

2. [vue3.x 响应式数据-ref()方式-对象类型](https://www.malaoshi.top/show_1GW1GugK1EMC.html "vue3.x 响应式数据-ref()方式-对象类型")

3. [vue3.x 响应式数据-ref()方式-数组类型](https://www.malaoshi.top/show_1GW1GvBWyFoi.html "vue3.x 响应式数据-ref()方式-数组类型")

### reactive()方式

1. [vue3.x 响应式数据-reactive()方式-只适用对象类型](https://www.malaoshi.top/show_1GW1GvSWRsSY.html "vue3.x 响应式数据-reactive()方式-只适用对象类型")

2. [vue3.x 响应式数据-reactive()方式-数组](https://www.malaoshi.top/show_1GW1Gw0RcFEM.html "vue3.x 响应式数据-reactive()方式-数组")

3. [vue3.x教程-toRefs()、toRef()函数-解构 reactive 对象](https://www.malaoshi.top/show_1GW3gOLnpLwF.html "vue3.x教程-toRefs()、toRef()函数-解构 reactive 对象")

# 表单控件

- [vue3.x教程-标签的ref属性，获取元素、组件](https://www.malaoshi.top/show_1GW3kUWoiOVS.html "vue3.x教程-标签的ref属性，获取元素、组件")

# 计算属性和监视器

- [vue3.x教程-计算属性（computed）](https://www.malaoshi.top/show_1GW3gPExyowj.html "vue3.x教程-计算属性（computed）")

### 监视器

- [vue3.x教程-watch监听器介绍](https://www.malaoshi.top/show_1GW3ggXXf4Vp.html "vue3.x教程-watch监听器介绍")

- [vue3.x教程-watch监听器的使用1-监视 ref基本类型](https://www.malaoshi.top/show_1GW3ggZ7dpQu.html "vue3.x教程-watch监听器的使用1-监视 ref基本类型")

- [vue3.x教程-watch监听器的使用2-监视 ref对象类型](https://www.malaoshi.top/show_1GW3ggaOgM1y.html "vue3.x教程-watch监听器的使用2-监视 ref对象类型")

- [vue3.x教程-watch监听器的使用3-监视 reactive对象类型](https://www.malaoshi.top/show_1GW3ggbGuAPz.html "vue3.x教程-watch监听器的使用3-监视 reactive对象类型")

- [vue3.x教程-watch监听器的使用4-监视对象中的某个属性](https://www.malaoshi.top/show_1GW3ggvzMN4c.html "vue3.x教程-watch监听器的使用4-监视对象中的某个属性")

- [vue3.x教程-watch监听器的使用5-监视多个数据](https://www.malaoshi.top/show_1GW3ghEd6N2e.html "vue3.x教程-watch监听器的使用4-监视多个数据")

- [vue3.x教程-watch监听器的使用6-加载页面后自动执行（immediate）](https://www.malaoshi.top/show_1GW3giDSuJun.html "vue3.x教程-watch监听器的使用6-加载页面后自动执行（immediate）")

- [vue3.x教程-watchEffect监视器](https://www.malaoshi.top/show_1GW3hpCAhtxc.html "vue3.x教程-watchEffect监视器")

- [vue3.x教程-监视器watch和watchEffect区别对比](https://www.malaoshi.top/show_1GW3hpGfQxfH.html "vue3.x教程-监视器watch和watchEffect区别对比")

- [前端防抖](https://www.malaoshi.top/show_1GW3hpT6tler.html "前端防抖")

- [前端防抖-vue3+第三方库 Lodash实现](https://www.malaoshi.top/show_1GW3hqKEmf2H.html "前端防抖-vue3+第三方库 Lodash实现")

# 自定义hooks

- [vue3.x教程-自定义 Hook](https://www.malaoshi.top/show_1GW3iZpCpZMv.html "vue3.x教程-自定义 Hook")

# 路由

- [vue3.x教程：Vue 路由 Router](https://www.malaoshi.top/show_1GW3mJeyWUMx.html "vue3.x教程：Vue 路由 Router")

- [vue3.x教程：安装Vue Router4](https://www.malaoshi.top/show_1GW3mKBT0uqi.html "vue3.x教程：安装Vue Router4")

### 导航

- [vue3.x教程：路由第一个案例（RouterLink、RouterView）](https://www.malaoshi.top/show_1GW3mL39vLtB.html "vue3.x教程：路由第一个案例（RouterLink、RouterView）")

- [vue3.x教程：路由组件（页面组件）与views、pages目录](https://www.malaoshi.top/show_1GW3mWJgqggC.html "vue3.x教程：路由组件（页面组件）与views、pages目录")

- [vue3.x教程：路由案例-重定向](https://www.malaoshi.top/show_1GW3maviTXt8.html "vue3.x教程：路由案例-重定向")

- [vue3.x教程：嵌套路由（多级菜单）-（router-link标签、根据path跳转）](https://www.malaoshi.top/show_1GW3mbFbUL5g.html "vue3.x教程：嵌套路由（多级菜单）-（router-link标签、根据path跳转）")

- [vue3.x教程：命名路由-（router-link标签、根据路由名字跳转）](https://www.malaoshi.top/show_1GW3mbXAZjqR.html "vue3.x教程：命名路由-（router-link标签、根据路由名字跳转）")

##### 传参

- [vue3.x教程：路由传参-query方式](https://www.malaoshi.top/show_1GW3mcIcFFIs.html "vue3.x教程：路由传参-query方式")

- [vue3.x教程：路由传参-params方式](https://www.malaoshi.top/show_1GW3mcq0sILm.html "vue3.x教程：路由传参-params方式")

### 编程式导航

- [vue3.x教程：路由-编程式导航（router.push）](https://www.malaoshi.top/show_1GW3mf11OtOI.html "vue3.x教程：路由-编程式导航（router.push）")

##### 传参

- [vue3.x教程：路由-编程式导航传参-query方式](https://www.malaoshi.top/show_1GW3mfMx0j4Z.html "vue3.x教程：路由-编程式导航传参-query方式")

- [vue3.x教程：路由-编程式导航传参-params方式](https://www.malaoshi.top/show_1GW3mfoM6QJo.html "vue3.x教程：路由-编程式导航传参-params方式")

### 其他

- [vue3.x教程：Router路由模式：hash模式和history模式](https://www.malaoshi.top/show_1GW3mLEqTeyP.html "vue3.x教程：Router路由模式：hash模式和history模式")

- [vue3.x教程：路由push和replace](https://www.malaoshi.top/show_1GW3mfyMiXkb.html "vue3.x教程：路由push和replace")

# pinia状态管理

- [vue3.x教程-Pinia状态管理介绍（替代Vuex）](https://www.malaoshi.top/show_1GW3H2YtPX7r.html "vue3.x教程-Pinia状态管理介绍（替代Vuex）")

- [vue3.x教程-Pinia状态管理-安装](https://www.malaoshi.top/show_1GW3iFFjUhE4.html "vue3.x教程-Pinia状态管理-安装")

- [vue3.x教程-Pinia状态管理-初始化](https://www.malaoshi.top/show_1GW3iFY6RtcE.html "vue3.x教程-Pinia状态管理-初始化")

- [vue3.x教程-Pinia状态管理-读取数据](https://www.malaoshi.top/show_1GW3iT5KGrxt.html "vue3.x教程-Pinia状态管理-读取数据")

- [vue3.x教程-Pinia状态管理-修改数据：直接修改、批量修改、actions修改](https://www.malaoshi.top/show_1GW3iYtHcu5Z.html "vue3.x教程-Pinia状态管理-修改数据：直接修改、批量修改、actions修改")

- [vue3.x教程-Pinia状态管理-从服务器获取数据](https://www.malaoshi.top/show_1GW3iZ8hxx6n.html "vue3.x教程-Pinia状态管理-从服务器获取数据")

# 配置文件

- [vite.config.ts](vue3教程：vite.config.ts文件说明 "vite.config.ts")

- [vue3.x 设置代理](https://www.malaoshi.top/show_1GW3DQ539Avz.html "vue3.x 设置代理")

# 其他

- [Vue3 setup() 可以与Vue2的data()、methods()共存](https://www.malaoshi.top/show_1GW1GishpzEV.html "Vue3 setup() 可以与Vue2的data()、methods()共存")

- [vue3.x教程-nextTick() 延缓执行](https://www.malaoshi.top/show_1GW3kSSBcD9l.html "vue3.x教程-nextTick() 延缓执行")

# 部署

- [vue3编译打包，发布到fastapi静态目录下，显示空白页](https://www.malaoshi.top/show_1GW3MxzA5pmi.html "vue3编译打包，发布到fastapi静态目录下，显示空白页")

原文出处：/show_1GW1FFyOCt6G.html