千鋒教育前端Vue3.0全套視頻教程（Kerwin2023版，Vue.js零基礎
組合式和選項式不同,
選項式vue3向下兼容vue2的大部分,除了過濾器,還有兩個鉤子函數(shù)(名稱修改了),
組合式中沒有了vue2中的created和beforecreated,改為了setup
v-if比v-for有更高優(yōu)先級
vue3中可以綁定多個事件一定要添加小括號() ,方法中間使用逗號, 隔開即可
事件中使用下列方法可以事件和值同時傳
vue2和vue3都支持,傳值設置多個類型
vue可以將clas樣式傳給子組件
reactive 定義響應式數(shù)據(jù)
reactive它也是定義響應式數(shù)據(jù)的
ref 它可以定義任意類型，ref定義的對象調用是一定要加.value
reactive 它只能定義引用類型[對象],調用reactive對象中的屬性不需要加.value的
reactive可以理解為是對ref在引用對象定義的一個簡化方案,不用寫.value
把值轉為ref對象 1 對 1
批量轉換 把reactive中的所有的數(shù)據(jù)對轉為ref對象
shallowReactive,isReactive,readonly
shallowReactive 淺層響應式，只對對象的第1層進行響應式處理
isReactive 工具函數(shù)，檢查當前的變量是否是由 reactive 或 shallowReactive 創(chuàng)建
ref reactive toRefs => 重點記牢 ref
多事件綁定
1.以逗號隔開
2.寫數(shù)組 可以寫成數(shù)組方式，親測發(fā)現(xiàn)還是需要寫小括號
defineComponent 和 customRef
defineComponent 如果你在選項式方案用ts，寫此方案為多，可以有類型推導
defineComponent 此方案還有更好的語法提示
customRef 創(chuàng)建一個自定義的 ref，顯式聲明對其依賴追蹤和更新觸發(fā)的控制方式
customRef 想著自主的去處理ref響應數(shù)據(jù)過程控制就可以用到它
setup
1.setup它是vue3提供的compositionApi配置入口，所有的組合api都只能寫在此配置中
2.此方法它不能使用this，this它是一個undefined
3.此方法默認只能返回json對象，不能返回其他類型
4.如果使用async/await則必須要和Suspense組件進行集合才可以使用
5.setup它有兩個參數(shù)，此參數(shù)可以讓我們在寫代碼調用props或相關方法
6.setup中包含了數(shù)據(jù)，方法，計算屬性，偵聽器等
注：如果你寫的是一個選項式寫法，data和setup等是可以共存的
在vue3中自定義的函數(shù)，如果是以use開頭的，一般叫它為 hooks函數(shù)
自定義hooks函數(shù)
為何返回值用數(shù)組不用對象?
在解構時，它更加靈活方便，可以隨意的去起解構變量名稱
provide和inject
- provide是提供一個值，可以被后代組件注入。
provide()?接受兩個參數(shù)：第一個參數(shù)是要注入的 key，可以是一個字符串或者一個 symbol，第二個 參數(shù)是要注入的值。
- inject注入一個由祖先組件或整個應用 (通過?app.provide()) 提供的值。
第一個參數(shù)是注入的 key。第二個參數(shù)是可選的，即在沒有匹配到 key 時使用的默認值。
需要注意的是只有響應式的才能被子組件所接收實現(xiàn)響應式,即ref或reactive定義的
dev （Development environment）?： 開發(fā)環(huán)境，外部用戶無法訪問，開發(fā)人員使用，版本變動很大。
sit (System Integration Test )?： 系統(tǒng)集成測試，開發(fā)人員自己測試流程是否走通。
test?：測試環(huán)境，外部用戶無法訪問，專門給測試人員使用的，版本相對穩(wěn)定。
fat (Feature Acceptance Test environment)?： 功能驗收測試環(huán)境，用于軟件測試者測試使用
uat (User Acceptance Test environment)?： 用戶驗收測試環(huán)境，用于生產環(huán)境下的軟件測試者測試使用。
pre?：灰度環(huán)境，外部用戶可以訪問，但是服務器配置相對低，其它和生產一樣，外部用戶可以訪問，版本發(fā)布初期，正式版本發(fā)布前。
pro（Production e
ts基礎
一、基本類型
1. string 類型
let firstName: string = "張三";
let message: string = `Hello ${firstName}, age is ${age}`;
2. number 類型
let age: number = 18;
3. boolean 類型
let isDone: boolean = false;
4. bigInt 類型
let oneHundred: bigint = BigInt(100);
5. symbol 類型
let s: symbol = Symbol();
6. void類型
let s: void
7. null類型
let s: null
8. undefined類型
let s: undefined
9. never類型
let s: never
二、Array 與 Tuple
1. Array 類型
// 第一種定義數(shù)組類型的方式： type[] let arr1: number[] = [1, 2, 3, 4]; // 第二種定義數(shù)組類型的方式(數(shù)組泛型)：Array<type> let arr2: Array<number> = [1, 2, 3, 4];
2. Tuple 類型
數(shù)組一般由同種類型的值組成，但有時我們需要在數(shù)組中儲存不同類型的值，這時候我們就可以使用元組。
元組類型用來表示已知元素數(shù)量和類型的數(shù)組，各元素的類型不必相同，對應位置的類型需要相同。
let x: [string, number]; x = ["hello", 1]; // OK x = [1, "hello"]; // Error console.log(x[0]); // 輸出 hello
三、Any 與 Unknown
1. Any 類型
在 TypeScript 中，任何類型都可以被歸為 any 類型。這讓 any 類型成為了類型系統(tǒng)的頂級類型（也被稱為全局超級類型）
作為開發(fā)者，any 類型給了我們很大的自由：TypeScript 允許我們對 any 類型的值執(zhí)行任何操作，而無需事先執(zhí)行任何形式的檢查：
// 聲明一個 any 類型的變量 let notSure: any = 4; // 可以給它賦值為 其他任何類型 notSure = "maybe it is a string"; // OK notSure = true; // OK // 調用它不存在的屬性or方法 notSure.myName; // Ok notSure.getName(); // OK // 將它賦值給任意類型的 let num: number = notSure // OK
在許多情況下，這太寬松了。使用 any 類型，可以很容易編寫類型正確但在運行時可能有問題的代碼。如果我們使用 any 類型，就無法使用 TypeScript 提供的大量的保護機制。為了解決 any 帶來的問題，TypeScript 3.0 引入了類型安全的 unknown 類型。
2. noImplicitAny 配置
如果未指定類型，并且 TypeScript 無法從上下文推斷出類型，則編譯器通常默認為：any
通常希望避免這種情況，可以在tsconfig.json 文件中配置：
"noImplicitAny": true
3. Unknown 類型
就像所有類型都可以賦值給 any, 所有類型也都可以賦值給 unknown 。這使得 unknown 成為 TypeScript 類型系統(tǒng)的另一種頂級類型（另一種是 any）
let value: unknown;
value = true; // ok
value = 40; // ok
value = "hello world"; // ok
value = []; // ok
value = {}; // ok
value = null; // ok
value = undefined; // ok
value = new TypeError(); // ok
value = Symbol(); // ok
只能將 unknown 類型分配給 any 類型和 unknown 類型。
let value: unknown; let value1: unknown = value; // ok let value2: any = value; // ok let value3: number = value; // Error let value4: string = value; // Error
對 unknown 類型的值做一些操作時，這些操作將不再被認為是類型正確的。
// 聲明一個 unknown 類型的變量 let notSure: unknown = 4; // 可以給它賦值為 其他任何類型 notSure = "maybe it is a string"; notSure = true; // 調用它不存在的屬性or方法 notSure.myName; // Error notSure.getName(); // Error // 將它賦值給任意類型 let num: number = notSure; // Error
any不挑剔，也很受人喜歡
unknown不挑剔，只有any和unknown兩個朋友
四、類型推導
TypeScript 能根據(jù)一些簡單的規(guī)則推斷（檢查）變量的類型。故大部分情況下我們無需手動標注類型。
let foo = 123; // foo 是 'number' let bar = 'hello'; // bar 是 'string' foo = bar; // Error: 不能將 'string' 賦值給 `number`
五、函數(shù)
函數(shù)是在 JavaScript 中傳遞數(shù)據(jù)的主要方式。 TypeScript 允許您指定函數(shù)的輸入和輸出值的類型。
1. 參數(shù)類型標注
function greet(name: string) {
console.log("Hello, " + name.toUpperCase() + "!!");
}
greet("hello"); // OK
greet(42); // Error 類型“number”的參數(shù)不能賦給類型“string”的參數(shù)。
2. 可選參數(shù)
/**
* 通過在 參數(shù)名稱后面寫一個 ? 號，表示該參數(shù)可選。
* 這時 name 的類型為 string | undefined 的一個聯(lián)合類型
*/
function greet(name?: string) {
// TODO
}
greet("hello"); // OK
greet(); // OK
greet(42); // Error 類型“number”的參數(shù)不能賦給類型“string”的參數(shù)
3. 返回類型標注
function getFavoriteNumber(): number {
// return 26; // OK
return "hello"; // Error 不能將類型“string”分配給類型“number”。
}
4. 匿名函數(shù)自動推斷類型
const names = ["Alice", "Bob", "Eve"];
names.forEach(function (s) {
console.log(s.toUppercase()); // Error 屬性“toUppercase”在類型“string”上不存在。你是否指的是“toUpperCase”?
});
names.forEach((s) => {
console.log(s.toUppercase()); // Error 屬性“toUppercase”在類型“string”上不存在。你是否指的是“toUpperCase”?
});
六、對象類型
要定義對象類型，我們只需列出其屬性及其類型
function printCoord(pt: { x: number; y: number }) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 }); // OK
printCoord({ x: "3", y: "8" }); // Error 不能將類型“string”分配給類型“number”
1. 可選屬性
對象類型還可以指定其部分或全部屬性是可選的。 只需要在屬性名稱后添加 ? 號即可。
function printName(obj: { first: string; last?: string }) {
// ...
}
printName({ first: "Bob" }); // OK
printName({ first: "Alice", last: "Alisson" }); // OK
2. 可選屬性檢查
當您從可選屬性讀取時，您必須在使用之前進行檢查。
function printName(obj: { first: string; last?: string }) {
console.log(obj.last.toUpperCase()); // Error 對象可能為“未定義”
if (obj.last !== undefined) {
// OK
console.log(obj.last.toUpperCase());
}
// OK
console.log(obj.last?.toUpperCase());
}
3. 只讀屬性
對象類型還可以指定其部分或全部屬性是只讀的。只需要在屬性名稱前添加 readonly 即可。
function printName(obj: { readonly first: string; last?: string }) {
obj.first = "hello"; // Error 無法分配到 "first" ，因為它是只讀屬性。
}
七、交叉類型（&）
交叉類型：將多個類型合并為一個類型，使用&符號連接，如：
type AProps = { a: string }
type BProps = { b: number }
type allProps = AProps & BProps
const Info: allProps = {
a: '小杜杜',
b: 7
}
八、聯(lián)合類型 |
聯(lián)合類型是由兩個或多個其他類型組成的類型，通常使用 | 聯(lián)合。
1. 定義聯(lián)合類型
function printId(id: number | string) {
console.log("Your ID is: " + id);
}
printId(100); // OK
printId("200"); // OK
printId(true); // Error 類型“boolean”的參數(shù)不能賦給類型“string | number”的參數(shù)
let isOk: 0 | 1 = 2; // 不能將類型“2”分配給類型“0 | 1”
2. 使用聯(lián)合類型
在 TypeScript 中，若一個變量使用了聯(lián)合類型，那么當我們使用該變量時必不可少的會去明確的限制該變量的具體類型，這稱為類型縮小。
function printId(id: number | string) {
console.log(id.toUpperCase()); // Error
// 類型縮小
if (typeof id === "string") {
// In this branch, id is of type 'string'
console.log(id.toUpperCase());
} else {
// Here, id is of type 'number'
console.log(id);
}
}
九、類型別名
將現(xiàn)有的一些類型取個別名，方便后續(xù)復用。
1. 描述對象
type Point = {
x: number;
y: number;
};
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });
十、接口
接口聲明是命名對象類型的另一種方法：
1. 描述對象
interface Point {
x: number;
y: number;
}
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });
2. 描述函數(shù)
interface SetPoint {
(x: number, y: number): void;
}
十一、type 和 interface
1. 相同點
- 類型別名和接口都可以用來描述對象或函數(shù)
- 類型別名和接口都支持擴展
2. 不同點
- 類型別名可以為基本類型、聯(lián)合類型或元組類型定義別名，而接口不行。
- 同名接口會自動合并，而類型別名不會。
3. 使用場景
- 使用類型別名的場景：
- 定義基本類型的別名時，使用 type
- 定義元組類型時，使用 type
- 定義函數(shù)類型時，使用 type
- 定義聯(lián)合類型時，使用 type
- 定義映射類型時，使用 type
- 使用接口的場景：
- 需要利用接口自動合并特性的時候，使用 interface
- 定義對象類型且無需使用 type 的時候，使用 interface
十二、TypeScript 斷言
1. 類型斷言
有時候你會遇到這樣的情況，你會比 TypeScript 更了解某個值的詳細信息。通常這會發(fā)生在你清楚地知道一個實體具有比它現(xiàn)有類型更確切的類型。
通過類型斷言這種方法可以告訴編譯器，”相信我，我知道自己在干什么“。類型斷言好比其他語言里的類型轉換，但是不進行特殊的數(shù)據(jù)檢查和解構。它沒有運行時的影響，只是在編譯階段起作用。
類型斷言有兩種方式：
1. 尖括號<> 語法
let someValue: any = "this is a string"; let strLength: number = (<string>someValue).length;
2. as 語法
let someValue: any = "this is a string"; let strLength: number = (someValue as string).length;
vue中一般使用as
2. 非空斷言
非空斷言使用一個后綴表達式操作符!表示。可以用于斷言操作對象是非 null 和 非 undefined 類型的。
1. 忽略 null 和 undefined 類型
function myFunc(maybeString: string | null | undefined) {
const str: string = maybeString; // 不能將類型“string | null | undefined”分配給類型“string”。不能將類型“undefined”分配給類型“string”
const str1: string = maybeString!; // OK
console.log(str);
console.log(str1);
}
2. 調用函數(shù)時忽略 undefined 類型
type CallbackType = () => number;
function myFunc(callback: CallbackType | undefined) {
const num1 = callback(); // Error 不能調用可能是“未定義”的對象。
const num2 = callback!(); // Ok
}
十三、文本類型 git merge 分支名
除了一般類型之外，我們還可以在類型位置引用特定的字符串和數(shù)字
let isOk: 0 | 1 = 2; // 不能將類型“2”分配給類型“0 | 1” let string: "hello" = ""; // Error 不能將類型“""”分配給類型“"hello"”
十四、Null 和 Undefined 類型
TypeScript 中，undefined 和 null 兩者都有各自的類型分別為 undefined 和 null。
let u: undefined = undefined; let n: null = null;
十五、Enum 類型
使用枚舉我們可以定義一些帶名字的常量。使用枚舉可以清晰地表達意圖或創(chuàng)建一組有區(qū)別的用例。
TypeScript 支持數(shù)字和字符串的枚舉。
1. 數(shù)字枚舉
enum Direction {
Up,
Down,
Left,
Right,
}
let dir: Direction = Direction.Up;
/**
* 默認情況下，Up 的值為 0, 其余成員會按順序自增。
* Up 0
* Down 1
* Left 2
* Right 3
*/
enum Direction {
Up = 1,
Down,
Left,
Right,
}
let dir: Direction = Direction.Up;
/**
* 也可以給成員設置初始值。
* Up 1
* Down 2
* Left 3
* Right 4
*/
enum Direction {
Up = 1,
Down,
Left,
Right,
}
let dir: Direction = Direction.Up;
/**
* 也可以給成員設置初始值。
* Up 1
* Down 2
* Left 3
* Right 4
*/
編譯生成的 JS 代碼如下示例：
var Direction;
(function (Direction) {
Direction[Direction["Up"] = 1] = "Up";
Direction[Direction["Down"] = 2] = "Down";
Direction[Direction["Left"] = 3] = "Left";
Direction[Direction["Right"] = 4] = "Right";
})(Direction || (Direction = {}));
var dir = Direction.Up;
2. 字符串枚舉
在 TypeScript 2.4 版本，允許我們使用字符串枚舉。在一個字符串枚舉里，每個成員都必須用字符串字面量。
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
let dir: Direction = Direction.Up;
編譯生成的 JS 代碼如下示例：
var Direction;
(function (Direction) {
Direction["Up"] = "UP";
Direction["Down"] = "DOWN";
Direction["Left"] = "LEFT";
Direction["Right"] = "RIGHT";
})(Direction || (Direction = {}));
var dir = Direction.Up;
反向映射：
通過觀察數(shù)字枚舉和字符串枚舉的編譯結果，我們可以知道數(shù)字枚舉除了支持 從成員名稱到成員值 的普通映射之外，它還支持 從成員值到成員名稱 的反向映射：
enum Direction {
Up,
Down,
Left,
Right,
}
let dirName = Direction[0]; // Up
let dirValue = Direction.Up; // 0
3. 常量枚舉
除了數(shù)字枚舉和字符串枚舉之外，還有一種特殊的枚舉 -- 常量枚舉。它是使用 const 關鍵字修飾的枚舉，常量枚舉會使用內聯(lián)語法，不會為枚舉類型編譯生產任何 JavaScript 。
const enum Direction {
Up,
Down,
Left,
Right,
}
let dir: Direction = Direction.Up;
編譯生成的 JS 代碼如下：
var dir = 0 /* Direction.Up */;
4. 異構枚舉
異構枚舉的成員值是數(shù)字和字符串的混合
enum BooleanLikeHeterogeneousEnum {
No = 0,
Yes = "YES",
}
十六、 Void 類型 與 Never 類型
1. Void 類型
某種程度上來說，void 類型像是與 any 類型相反，它表示沒有任何類型。
當一個函數(shù)沒有返回值時，這時它的返回值類型是 void
// 返回沒有返回值時，hello 返回值類型為 void
function hello(name: string) {
console.log(`Hello ${name}`);
}
// 但當你主動返回 undefined 時，返回值類型為 undefined
function world(name: string) {
console.log(`Hello ${name}`);
return undefined;
}
2. Never 類型
never 類型表示的是那些永不存在的類型。
// 返回 never 的函數(shù)必須存在無法達到的終點
function error(message: string): never {
// 1. 通過拋出異常實現(xiàn) 返回值類型為 never
throw new Error(message);
}
function infiniteLoop(): never {
// 2. 通過死循環(huán)實現(xiàn) 返回值類型為 never
while (true) {}
}
// 類型別名 a 是一個 never 類型。因為不存在一個類型既是 string 又是 number
type a = string & number
