vue3.2+TypeScript+Pinia学习笔记（最新版！！！）
前言：vue3+typescript+pinia学习
文章目录
- 一、vue3
-
- 1.组合式API
- 2.setup函数
- 3.reactive函数
- 4.ref函数
- 5.reactive 与 ref 的选择
- 6.setup语法糖
-
- 6.1.vue3+vite自动导入ref等组合式API插件 `unplugin-auto-import`
- 7.computed函数
- 7.watch函数
- 8.生命周期函数
- 9.ref获取DOM元素
- 10.ref操作组件-defineExpose
- 11.父传子defineProps函数
- 12.子传父-defineEmits函数
- 13.跨级组件通讯provide与inject函数
- 14.保持响应式-toRefs函数
- 15.综合案例
- 二、Typescript
-
- 1.Typescript起步
-
- 1.1 Typescript介绍
- 1.2 TypeScript 编译
- 2.TypeScript 核心
-
- 2.1 原始类型
- 2.2 数组类型
- 2.3 联合类型
- 2.4 类型别名
- 2.5 函数类型
-
- 2.5.1 基本使用
- 2.5.2 void 类型
- 2.5.3 可选参数
- 2.6 对象类型
-
- 2.6.1 拓展用法
- 2.7 接口 interface
-
- 2.7.1 interface 继承
- 2.7.2 type 交叉类型
- 2.7.3 interface 和 type 的相同点和区别
- 2.8 类型推断
- 2.9 字面量类型
-
- 2.9.1 字面量类型介绍
- 2.9.2 字面量类型应用
- 2.10 any 类型
- 2.11 类型断言
- 2.11 泛型
-
- 2.11.1 泛型别名
- 2.11.2 泛型接口
- 2.11.3 泛型函数
- 3.TypeScript 应用
-
- 3.1TypeScript与Vue
-
- 3.1.1 defineProps的TS写法
- 3.1.2 defineEmits的TS写法
- 3.1.3 ref的TS写法
- 3.1.4 reactive的TS写法
- 3.1.5 computed和TS
- 3.1.6 事件处理与TS
- 3.1.7 Template Ref与TS
- 3.1.8 非空断言
- 3.2 TypeScript类型声明文件
-
- 3.2.1 基本介绍
- 3.2.2 内置类型声明文件
- 3.2.3 第三方库类型声明文件
- 3.2.4 自定义类型声明文件
-
- 3.2.4.1 共享类型
- 4.TypeScript 案例（头条）
- 5. TS在vue3中使用总结
- 三、Pinia
-
- 3.1 Pinia介绍
- 3.2 Pinia使用步骤（以vue3为例）
- 3.3 storeToRefs的使用
- 3.4 用Pinia改造头条
一、vue3
1.组合式API
介绍：什么是组合式API，组合式API的特点
Vue3提供两种组织代码逻辑的写法：
- 通过data、methods、watch 等配置选项组织代码逻辑是选项式API写法
- 所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是组合式API写法
// 选项式API
<template>
<button @click="toggle">显示隐藏图片</button>
<img v-show="show" alt="Vue logo" src="./assets/logo.png" />
<hr />
计数器：{{ count }} <button @click="increment">累加</button>
</template>
<script>
export default {
data() {
return {
show: true,
count: 0,
};
},
methods: {
toggle() {
this.show = !this.show;
},
increment() {
this.count++;
},
},
};
</script>
// 组合式api
<template>
<button @click="toggle">显示隐藏图片</button>
<img v-show="show" alt="Vue logo" src="./assets/logo.png" />
<hr />
计数器：{{ count }} <button @click="increment">累加</button>
</template>
<script>
// ref 就是一个组合式API
import { ref } from 'vue';
export default {
setup () {
// 显示隐藏
const show = ref(true)
const toggle = () => {
show.value = !show.value
}
// 计数器
const count = ref(0)
const increment = () => {
count.value ++
}
return { show, toggle, count, increment }
}
};
</script>
总结：
- 在setup中通过vue提供的函数组织代码实现功能，就是组合式API写法。
- 组合式API有什么好处？ 可复用，可维护
- ref 是不是一个组合式API？ 是
2.setup函数
概念：
setup函数是组合式API的入口函数setup函数是Vue3特有的选项，作为组合式API的起点- 从组件生命周期看，它在
beforeCreate之前执行 - 函数中
this不是组件实例，是undefined（今后在vue3的项目中几乎用不到this, 所有的东西通过函数获取） - 如果数据或者函数在模板中使用，需要在
setup返回
3.reactive函数
通常使用它定义对象类型的响应式数据
原因：以前在 data 函数中返回对象数据就是响应式的，而现在 setup 中返回对象数据不是响应式的
<template>
<div>
<p>姓名：{{state.name}}</p>
<p>年龄：{{state.age}} <button @click="state.age++">一年又一年</button></p>
</div>
</template>
<script>
// 1. 从vue中导入reactive函数
import { reactive } from "vue";
export default {
setup() {
// 2. 创建响应式数据对象
const state = reactive({ name: 'tom', age: 18 })
// 3. 返回数据
return { state }
}
};
</script>
4.ref函数
通常使用它定义响应式数据，不限类型
注意：使用 ref 创建的数据，js中需要 .value，template 中可省略
<template>
<div>
<p>
计数器：{{ count }}
<button @click="count++">累加1</button>
<!-- template中使用可省略.value -->
<button @click="increment">累加10</button>
</p>
</div>
</template>
<script>
// 1. 从vue中导入ref函数
import { ref } from "vue";
export default {
setup() {
// 2. 创建响应式数据对象
const count = ref(0);
const increment = () => {
// js中使用需要.value
count.value += 10;
};
// 3. 返回数据
return { count, increment };
},
};
</script>
5.reactive 与 ref 的选择
reactive可以转换对象成为响应式数据对象，但是不支持简单数据类型。ref可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要.value。- 它们各有特点，现在也没有最佳实践，没有明显的界限，所有大家可以自由选择。
- 推荐用法：如果能确定数据是对象且字段名称也确定，可使用
reactive转成响应式数据，这样可以省去.value其他一概使用 ref 。
6.setup语法糖
作用：简化 setup 固定套路代码 ，让代码更简洁
使用 setup 有几件事必须做：
- 默认导出配置选项
- setup函数声明
- 返回模板需要数据与函数
// 不使用setup语法糖
<script>
export default { // 1. 默认导出配置选项
setup() { // 2. setup函数声明
const say = () => console.log('hi')
return { say } // 3. 返回模板需要数据与函数
}
}
</script>
// 使用setup语法糖）
<script setup>
const say = () => console.log('hi')
</script>
// 小案例
<script setup>
// 显示隐藏
const show = ref(true)
const toggle = () => {
show.value = !show.value
}
// 计数器
const count = ref(0)
const increment = () => {
count.value ++
}
</script>
<template>
<button @click="toggle">显示隐藏图片</button>
<img v-show="show" alt="Vue logo" src="./assets/logo.png" />
<hr />
计数器：{{ count }} <button @click="increment">累加</button>
</template>
6.1.vue3+vite自动导入ref等组合式API插件 unplugin-auto-import
使用方法：
- 安装：npm install -D
unplugin-auto-import - 在vite.config.ts中配置
//1.先引入
import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
plugins: [
vue(),
//2.然后配置
AutoImport({
imports: ['vue'],
dts: 'src/auto-import.d.ts'
}),
]
})
7.computed函数
使用场景：当需要依赖一个数据得到新的数据，就使用计算属性
<script setup>
const list = ref([80,100,90,70,60])
const betterList = computed(()=>list.value.filter((item)=>item>=90))
setTimeout(()=>{
list.value.push(92,66)
},2000)
</script>
<template>
<div>
<p>分数{{list}}</p>
<p>优秀{{betterList}}</p>
</div>
</template>
7.watch函数
使用watch函数监听数据的变化
大致内容：
- 使用 watch 监听一个响应式数据
watch(数据, 改变后回调函数)
- 使用 watch 监听多个响应式数据
watch([数据1, 数据2, ...], 改变后回调函数)
- 使用 watch 监听响应式对象数据中的一个属性(简单)
watch(()=>数据, 改变后回调函数)
- 使用 watch 监听响应式对象数据中的一个属性(复杂)，配置深度监听
watch(()=>数据, 改变后回调函数, {deep: true})
案例
// 1.使用 watch 监听一个响应式数据
<script setup>
const count = ref(0)
watch(count,()=>{
console.log('count改变了');
})
setTimeout(()=>{
count.value++
},2000)
</script>
<template>
<p>计数器:{{count}}</p>
</template>
// 2.使用 watch 监听多个响应式数据
<script setup>
const count = ref(0)
const user = reactive({
name: "tom",
info: {
gender: "男",
age: 18,
},
});
// 2. 监听多个响应式数据
// watch([数据1, 数据2, ...], 改变后回调函数)
watch([count, user], () => {
console.log("数据改变了");
});
// 2s改变数据
setTimeout(() => {
count.value++;
}, 2000);
// 4s改变数据
setTimeout(() => {
user.info.age++;
}, 4000);
</script>
<template>
<p>计数器:{{count}}</p>
<p>
姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
</p>
</template>
// 3.使用 watch 监听响应式对象数据中的一个属性(简单)
<script setup>
const user = reactive({
name: "tom",
info: {
gender: "男",
age: 18,
},
});
// 监听响应式对象数据的一个数据，简单类型
// watch(()=>数据, 改变后回调函数)
watch(() => user.name, () => {
console.log("数据改变了");
});
// 2s改变数据
setTimeout(() => {
user.name = 'jack';
}, 2000);
</script>
<template>
<p>
姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
</p>
</template>
// 4.使用 watch 监听响应式对象数据中的一个属性(复杂)，配置深度监听
<script setup>
const user = reactive({
name: "tom",
info: {
gender: "男",
age: 18,
},
});
// 4. 监听响应式对象数据的一个数据，复杂类型
// watch(()=>数据, 改变后回调函数, {deep: true})
watch(() => user.info,() => {
console.log("数据改变了");
},
{
// 开启深度监听
deep: true,
}
);
// 2s改变数据
setTimeout(() => {
user.info.age = 60;
}, 2000);
</script>
<template>
<p>
姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
</p>
</template>
8.生命周期函数
常用: onMounted 组件渲染完毕：发请求，操作dom，初始化图表…
<script setup>
// 生命周期函数：组件渲染完毕
// 生命周期钩子函数可以调用多次
onMounted(()=>{
console.log('onMounted触发了')
})
onMounted(()=>{
console.log('onMounted也触发了')
})
</script>
<template>
<div>生命周期函数</div>
</template>
9.ref获取DOM元素
元素上使用 ref 属性关联响应式数据，获取DOM元素
步骤：
- 创建 ref
const hRef = ref(null) - 模板中建立关联
我是标题
- 使用
hRef.value
<script setup>
// 1.创建ref
const hRef = ref(null)
//3.改变DOM数据
const clickFn = () => hRef.value.innerText = '我不是标题'
</script>
<template>
<div>
// 2.在模板中关联ref
<h1 ref="hRef">我是标题</h1>
<button @click="clickFn">操作DOM</button>
</div>
</template>
10.ref操作组件-defineExpose
组件上使用 ref 属性关联响应式数据，获取组件实例
配合 defineExpose 暴露数据和方法，ref获取的组件实例才可以使用
- 使用