尚硅谷 Vue3+TypeScript 学习笔记（上）
目录
一、创建Vue3工程
1.1. 【基于 vue-cli 创建】
1.2. 【基于 vite 创建】(推荐)
1.3. 【一个简单的效果】
二、Vue3核心语法
2.1. 【OptionsAPI 与 CompositionAPI】
Options API 的弊端
Composition API 的优势
2.2. 【拉开序幕的 setup】
setup 概述
setup 的返回值
setup 与 Options API 的关系
setup 语法糖
2.3. 【ref 创建：基本类型的响应式数据】
2.4. 【reactive 创建：对象类型的响应式数据】
2.5. 【ref 创建：对象类型的响应式数据】
2.6. 【ref 对比 reactive】
2.7. 【toRefs 与 toRef】
2.8. 【computed】
2.9.【watch】
* 情况一
* 情况二
* 情况三
* 情况四
* 情况五
2.10. 【watchEffect】
2.11. 【标签的 ref 属性】
2.12. 【props】
2.13. 【生命周期】
2.14. 【自定义hook】
一、创建Vue3工程
1.1. 【基于 vue-cli 创建】
备注：目前
vue-cli已处于维护模式，官方推荐基于Vite创建项目。
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue_test
## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x
## 启动
cd vue_test
npm run serve1.2. 【基于 vite 创建】(推荐)
vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：
-
轻量快速的热重载（
HMR），能实现极速的服务启动。 -
对
TypeScript、JSX、CSS等支持开箱即用。 -
真正的按需编译，不再等待整个应用编译完成。（这里的意思是，你启动vite的项目会很快，因为他直接启动，并不先编译，等你访问某个页面时，按需编译，类似于懒加载）
-
webpack构建 与vite构建对比图如下：
## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No使用npm i安装依赖：
npm i然后npm run dev启动项目
总结：
-
Vite项目中，index.html是项目的入口文件，在项目最外层。 -
加载
index.html后，Vite解析二、Vue3核心语法
2.1. 【OptionsAPI 与 CompositionAPI】
-
Vue2的API设计是Options（配置）风格的。 -
Vue3的API设计是Composition（组合）风格的。
Options API 的弊端
Options类型的API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。Composition API 的优势
可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。
2.2. 【拉开序幕的 setup】
setup 概述
setup是Vue3中一个新的配置项，值是一个函数，它是Composition API“表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。特点如下：
-
setup函数返回的对象中的内容，可直接在模板中使用。 -
setup中访问this是undefined。 -
setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。
姓名：{{name}}
年龄：{{age}}
setup 的返回值
-
若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。
-
若返回一个函数：则可以自定义渲染内容，代码如下：
setup(){ return ()=> '你好啊！' }setup 与 Options API 的关系
-
Vue2的配置（data、methos......）中可以访问到setup中的属性、方法。 -
但在
setup中不能访问到Vue2的配置（data、methos......）。 -
如果与
Vue2冲突，则setup优先。
setup 语法糖
setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：姓名：{{name}}
年龄：{{age}}
扩展：上述代码，还需要编写一个不写
setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化-
第一步：
npm i vite-plugin-vue-setup-extend -D -
第二步：
vite.config.ts
import { defineConfig } from 'vite' import VueSetupExtend from 'vite-plugin-vue-setup-extend' export default defineConfig({ plugins: [ VueSetupExtend() ] })3. 第三步：
2.4. 【reactive 创建：对象类型的响应式数据】
-
作用：定义一个响应式对象（基本类型不要用它，要用
ref，否则报错） -
语法：
let 响应式对象= reactive(源对象)。 -
返回值：一个
Proxy的实例对象，简称：响应式对象。 -
注意点：
reactive定义的响应式数据是“深层次”的。
汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万
游戏列表：
- {{ g.name }}
测试：{{obj.a.b.c.d}}
2.5. 【ref 创建：对象类型的响应式数据】
-
其实
ref接收的数据可以是：基本类型、对象类型。 -
若
ref接收的是对象类型，内部其实也是调用了reactive函数。
汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万
游戏列表：
- {{ g.name }}
测试：{{obj.a.b.c.d}}
2.6. 【ref 对比 reactive】
宏观角度看：
-
ref用来定义：基本类型数据、对象类型数据； -
reactive用来定义：对象类型数据。
-
区别：
-
ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。 -
reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
比如 let car = ref({ brand: '奔驰', price: 100 })
可以使用 Object.assign(car, {brand: '奥拓', price:1})
-
使用原则：
-
若需要一个基本类型的响应式数据，必须使用
ref。 -
若需要一个响应式对象，层级不深，
ref、reactive都可以。 -
若需要一个响应式对象，且层级较深，推荐使用
reactive。
注意：表明上你用ref去把对象变成了响应式对象，但实际上底层value还是reactive。
2.7. 【toRefs 与 toRef】
-
作用：将一个响应式对象中的每一个属性，转换为
ref对象。 -
备注：
toRefs与toRef功能一致，但toRefs可以批量转换。 -
语法如下：
姓名：{{person.name}}
年龄：{{person.age}}
性别：{{person.gender}}
2.8. 【computed】
作用：根据已有数据计算出新数据（和
Vue2中的computed作用一致）。
姓：
名：
全名：{{fullName}}
2.9.【watch】
-
作用：监视数据的变化（和
Vue2中的watch作用一致） -
特点：
Vue3中的watch只能监视以下四种数据：
-
ref定义的数据。 -
reactive定义的数据。 -
函数返回一个值（
getter函数）。 -
一个包含上述内容的数组。
我们在
Vue3中使用watch的时候，通常会遇到以下几种情况：* 情况一
监视
ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。情况一：监视【ref】定义的【基本类型】数据
当前求和为：{{sum}}
* 情况二
监视
ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。注意：
-
若修改的是
ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。 -
若修改整个
ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。
情况二：监视【ref】定义的【对象类型】数据
姓名：{{ person.name }}
年龄：{{ person.age }}
* 情况三
监视
reactive定义的【对象类型】数据，且默认开启了深度监视。情况三：监视【reactive】定义的【对象类型】数据
姓名：{{ person.name }}
年龄：{{ person.age }}
测试：{{obj.a.b.c}}
* 情况四
监视
ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：-
若该属性值不是【对象类型】，需要写成函数形式。
-
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性
姓名：{{ person.name }}
年龄：{{ person.age }}
汽车：{{ person.car.c1 }}、{{ person.car.c2 }}
* 情况五
监视上述的多个数据
情况五：监视上述的多个数据
姓名：{{ person.name }}
年龄：{{ person.age }}
汽车：{{ person.car.c1 }}、{{ person.car.c2 }}
2.10. 【watchEffect】
-
官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
-
watch对比watchEffect
-
都能监听响应式数据的变化，不同的是监听数据变化的方式不同
-
watch：要明确指出监视的数据 -
watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
示例代码：
需求：水温达到50℃，或水位达到20cm，则联系服务器
水温：{{temp}}
水位：{{height}}
2.11. 【标签的 ref 属性】
作用：用于注册模板引用。
-
用在普通
DOM标签上，获取的是DOM节点。 -
用在组件标签上，获取的是组件实例对象。
用在普通
DOM标签上：尚硅谷
前端
Vue
用在组件标签上：
2.12. 【props】
// 定义一个接口，限制每个Person对象的格式 export interface PersonInter { id:string, name:string, age:number } // 定义一个自定义类型Persons export type Persons = ArrayApp.vue中代码：Person.vue中代码：- {{item.name}}--{{item.age}}
2.13. 【生命周期】
-
概念：
Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子 -
规律：
生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。
Vue2的生命周期
创建阶段：
beforeCreate、created挂载阶段：
beforeMount、mounted更新阶段：
beforeUpdate、updated销毁阶段：
beforeDestroy、destroyed-
Vue3的生命周期
创建阶段：
setup挂载阶段：
onBeforeMount、onMounted更新阶段：
onBeforeUpdate、onUpdated卸载阶段：
onBeforeUnmount、onUnmounted-
常用的钩子：
onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前) -
示例代码：
当前求和为：{{ sum }}
2.14. 【自定义hook】
-
什么是
hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。 -
自定义
hook的优势：复用代码, 让setup中的逻辑更清楚易懂。
示例代码：
-
useSum.ts中内容如下：
import {ref,onMounted} from 'vue' export default function(){ let sum = ref(0) const increment = ()=>{ sum.value += 1 } const decrement = ()=>{ sum.value -= 1 } onMounted(()=>{ increment() }) //向外部暴露数据 return {sum,increment,decrement} }useDog.ts中内容如下：
import {reactive,onMounted} from 'vue' import axios,{AxiosError} from 'axios' export default function(){ let dogList = reactiveerror console.log(err.message) } } // 挂载钩子 onMounted(()=>{ getDog() }) //向外部暴露数据 return {dogList,getDog} } - 组件中具体使用：
当前求和为：{{sum}}
加载中......
-