前端知识点总结 -- Vue篇,Ts篇

一、Vue

1. Vue项目-创建

创建一个工程化的Vue项目，执行命令：

npm init [email protected]

详细步骤说明：

Project name：------------------》项目名称，默认值：vue-project，可输入想要的项目名称。

Add TypeScript? ----------------》是否加入TypeScript组件？默认值：No。

Add JSX Support? ---------------》是否加入JSX支持？默认值：No。

Add Vue Router ...--------------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。

Add Pinia ...-------------------》是否添加Pinia组件来进行状态管理？默认值：No。

Add Vitest ...------------------》是否添加Vitest来进行单元测试？默认值：No。

Add an End-to-End ...-----------》是否添加端到端测试？默认值No。

Add ESLint for code quality? ---》是否添加ESLint来进行代码质量检查？默认值：No。

提示：执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具

项目创建完成以后，进入vue-project1项目目录，执行命令安装当前项目的依赖：

npm install

2.Vue项目的开发流程

1. API风格 （组合式API 和 选项式API）

• Vue的组件有两种不同的风格：组合式API 和 选项式API
• 组合式API

<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0); //声明响应式变量

function increment(){ //声明函数
   count.value++;
}

onMounted(() => { //声明钩子函数
  console.log('Vue Mounted....'); 
})
</script>

<template>
   <input type="button" @click="increment" value="Api Demo1 Count : ">{{ count }}
</template>

<style scoped>
   
</style>

• setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
• ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
• onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。
• 选项式API<script>export default{ data() { return { count: 0 } }, methods: { increment: function(){ this.count++ } }, mounted() { console.log('vue mounted.....'); }}</script>​<template> <input type="button" @click="increment" value="Api Demo1 Count : "> {{ count }}</template>​<style scoped>​</style>``````选项式API，可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

• 在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。

二、TS

2.3 常用类型

TS中除了支持JS中的数据类型之外，还提供了新的实用的数据类型。 常见类型如下:
类型例子备注字符串类型string数字类型number整数 、小数布尔类型booleantrue、falsenull/undefined类型null / undefined表示null和undefined本身，意义不大任意类型any没有指定任何类型数组类型number[] / Array

<number>

联合类型number | string一个值可以是几种类型之一字面量类型'left' | 'center' | 'right'限制变量或参数的取值，只能是其中之一函数类型() => void对函数的参数及返回值指定类型对象类型{...}限定对象的结构（属性及方法）复杂类型interface接口泛型

<T>

2.3.1 基础类型

基础类型：string，number，boolean，null，undefined，any，数组。

原则上，不推荐使用any!!! 这会让TypeScript又回到JavaScript(失去TS类型保护的优势)。

2.3.2 联合类型

联合类型：是指由两个或多个其他类型组成的类型，表示可以是其中的任意一种。

写法：类型1 | 类型2

TS中的联合类型中指定的多种类型之间使用 | 分隔，建议使用()括起来。

• 类型别名：相当于一种自定义类型，为任意类型起别名。
• 使用场景：当同一类型（复杂）别多次使用时，可以通过类型别名，简化该类型（复杂）的书写。
• 定义语法：type customType = 指定类型类型别名type，是可以为任意类型指定别名的。

2.3.3 函数类型

• 函数类型实际上指的是：函数的参数及返回值的类型
• 语法一：单独指定参数、返回值类型与JS不同，TS中函数调用时传入的参数个数必须与函数定义时参数个数一致。
• 语法二：书写完成函数类型（同时指定参数、返回值类型）
• 可选参数：在TS里我们可以在参数后使用？实现可选参数的功能。而且可选参数只能出现在参数列表的最后。如果函数没有返回值，则函数的返回值类型为：void

2.3.4 对象类型 & 接口interface

对象类型

TS中的对象类型就是来描述对应的结构的（有什么类型的属性和方法）

• 说明：- 直接使用{}来描述对象的结构。属性采用 属性名:类型 的形式；方法采用 方法名():返回值类型 的形式。- 如果方法有参数，就在方法名后面的小括号中指定参数类型（如：say(content:string):void）。- 在一行中指定多个属性类型时，可以使用 逗号/分号 来分割。- 方法的类型，也可以使用箭头函数形式，比如：say:() => void。- 对象的属性或方法，也可以是可选的，此时就可以声明可选属性/方法，使用 ？（问号）来表示。

接口interface

当一个对象类型被多次使用时，我们可以使用 接口（interface）来描述对象的类型，达到 复用 的目的。

• 说明：- 接口使用 interface 关键字来声明，接口名称可以是任意合法的变量名称。- 接口中定义的属性或方法，结尾可以使用逗号(,)/分号(;)分隔；如果每一行只有一个属性，后面也可以不写分号（;）。

Interface（接口） 与 type（类型别名）对比

• 相同点：都可以给对象指定类型。
• 不同点：- interface（接口），只能为对象指定类型。- type（类型别名），可以为任意类型指定别名。