Vue3+TypeScript笔记1

学习链接：https://www.bilibili.com/video/BV1of4y1v7tB

1.ts文件中的函数中的形参，如果使用了某个类型进行修饰，那么最终在翻译的js文件中是没有这个类型的

2.ts文件中的变量使用的是let进行修饰，编译的js文件中的修饰符就变成var了

3.类型注解：是一种轻量级的为函数或者变量添加的约束

4.typescript里的类知识一个语法糖，本质上还是javascript函数的实现

5.ts中变量一开始是什么类型，那么后期赋值的时候，只能用这个类型的数据，是不允许用其他类型的数据复制给当前的这个变量的

6.undefined和null都可以作为其他类型的子类型，把undefined和null赋值给其他类型的变量

7.元祖类型在使用的时候，数据的类型的位置和数据的个数，应该和在定义元祖的时候的数据类型及位置应该是一致的

8.enum,枚举里面值都可以叫做元素，有自己的编号，可是中文的数据值（不推荐

9.str:any

10.在函数声明的时候，小括号后面使用:void,代表的是该函数没有任何的返回值

11.联合类型

12.类型断言：,… as string

13.类型推断，

14.接口是对象的状态（属性）和行为（方法）的抽象

​ 是一种类型、规则、能力、约束

​ 可选属性:readonly, ?

15.类可以通过接口的方式，来定义当前这个类的类型

​ 类可以实现一个接口，类也可以实现多个接口，要注意，接口中的内容都要真正的实现

​ 接口和接口之间叫继承（使用的是extends关键字），类和接口之间叫实现（实现的是implements)

16.类实例化对象，构造函数初始化

17.构造函数中，可以对只读的属性成员的数据进行修改

18.如果构造函数中每日有任何的参数，类中的属性成员此时已经使用readonly修饰,

构造函数中用它修饰参数属性

19.存取器：让我们可以有效的控制对 对象中的成员的访问，通过getters和setters来进行操作 读取器，设置器

20.抽象类：包括抽象方法（抽象方法一般没有任何的具体内容的实现），也可以包含实例方法，抽象类是不能被实例化，为了让子类进行实例化及实现内部的抽象方法

21. …args剩余参数

22. 函数重载：函数名字相同，函数的参数及个数不同

23. 泛型：在定义函数、接口、类的时候不能预先确定要使用的数据的类型，而是在使用函数、接口、类的时候才能确定函数的类型 <T>

24. setup：新的option，所有的组合API函数都在此使用，只在初始化时执行一次

    函数如果返回对象，对象中的属性或方法，模板中可以直接使用

25. ref是一个函数，作用：定义一个响应式的数据，返回的是一个Ref对象，对象中有一个value属性，如果需要对数据进行操作，需要使用该Ref对象调用value属性的方法进行数据的操作

​ html模板中时不需要使用.value属性的写法

26.作用：定义多个数据的响应式

​ const proxy = reavtive(obj);接收一个普通对象然后返回该普通对象的响应式代理器对象

​ 响应式转换时“深层的”，会影响对象内部所有嵌套的属性

​ 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据都是响应式的

27.如果操作代理对象，目标对象中的数据也会随之变化，同时如果想要再操作数据的时候，界面也要跟着重新更新渲染，那么也是操作代理对象

28.Vue2的响应式：

对象：通过defineProperty对对象的已有属性的读取和修改进行劫持（监视/拦截）

数组：通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

29.Vue3的响应式

通过Proxy（代理）拦截对data任意属性的任意（13)种操作，包括属性值的读写、属性的添加。属性的删除等。

通过Reflect(反射)动态对被代理对象的相应属性进行特定的操作

30.setup时在beforeCreate生命周期回调之前就执行了，而且就执行一次

​ 由此可以判断出:setup在执行的时候，当前的组件还没有创建出来，也就意味着：组件实例对象this根本就不能用

​ this时undefined,说明，就不能通过this再去调用data/computed/methods/prop中的相关内容了

31.Vue3的composition API中2个最重要的响应式API

​ ref用来处理基本类型数据，reactive用来处理对象（递归深度响应式）

​ 如果用ref对象/数组，内部会自动将对象/数组转换为reactive的代理对象

​ ref内部：通过给value属性添加getter/setter来实现对数据的劫持

​ reactive内部：通过使用Proxy来实现对对象内部所有数据的劫持，并通过Reflect操作对象内部数据

ref的数据操作：在js中要value,在模板中不需要（内部解析模板时会自动添加.value)

32.readonly与shallowReadonly

​ readonly:深度只读数据，获取一个对西乡（响应式或纯对象）或ref并返回原始代理的只读代理，只读代理是深度的，访问的任何嵌套property也是只读的

​ shallowReadonly:浅只读数据，创建一个代理，使其自身的property为只读，但不执行嵌套对象的深度只读转换。

​ 应用场景：在某些特定情况下，不希望对数据进行更新的操作，就可以包装生成一个只读代理对象来读取数据，而不能修改或删除

33.toRef

​ 为源响应式对象上的某个属性创建一个ref对象，二者内部操作的是同一个数据值，更新时二者是同步的

​ 区别ref:拷贝了一份新的数据值单独操作，更新时相互不影响

​ 应用：当要将某个prop的ref传送给符合函数时，toRef很有用

Vue2和Vue3相比较

Vue3支持大多数的Vue2的特性

Vue中设计了一套强大的组合API代替了Vue2中的option API,复用性更强了

更好的支持TS

最主要:Vue3中使用了Proxy平日和Reflect代替了Vue2中Object.defineProperty()方法实现数据的响应式（数据代理）

重写了虚拟DOM，速度更快了

新的组件:Fragment(片段)/Teleport(瞬移)/Suspense(不确定)

设计了一个新的脚手架工具,vite