TS + Vue3.0
课程指南：Vue3+Ts 快速上手
面试题
- TS
-
- 1-什么是TS
- 2-TypeScript 和 JavaScript 的区别是什么？
- 3-为什么要用 TypeScript ？
- 4-TS和JS 哪个更好
- 5-泛型
- 6- 接口 Interfaces
- 7- 函数
- 8-TS中的类
- 9- 构造函数
- 10- 实例化是什么？
- 11- 方法重写是什么？
- 12- never 和 void 的区别？
- Vue3.0
-
- 1-Vue3.0新特性
- 2-Vue 3.0 性能提升主要是通过哪几方面体现的？
- 3-Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？—— 响应式优化
- 4-Vue3.0 编译做了哪些优化？
- 5- 源码体积的优化
- 6- Vue3.0新特性 —— Composition API 与 React.js 中 Hooks的异同点
TS
1-什么是TS
1.TypeScript 扩展了 JavaScript的语法，他给JavaScript添加了可选的静态类型和基于类的面向对象编程，所以任何现有的 JavaScript 程序可以运行在TypeScript 环境中。
2.而且TypeScript不存在跟浏览器不兼容的问题，因为在编译是，它产生的都是JavaScript代码。
3.TypeScript 是为大型应用的开发而设计，并且可以编译为 JavaScript。
4.TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持。
注：JS = ES + DOM +BOM
2-TypeScript 和 JavaScript 的区别是什么？
1.Typescript 是 JavaScript 的超集，可以被编译成 JavaScript 代码。
2.Typescript 是纯面向对象的编程语言，包含类和接口的概念。 程序员可以用它来编写面向对象的服务端或客户端程序，并将它们编译成 JavaScript 代码。
3.不同点：
TS 是一种面向对象编程语言，而 JS 是一种脚本语言（尽管 JS 是基于对象的）。
TS 支持可选参数， 静态类型，接口，JS 不支持。
3-为什么要用 TypeScript ？
1.TS在开发时能给出编译错误，而JS错误则需要在运行时才能暴露。
2.作为强类型语言，你可以明确数据的类型，代码可读性极强。
4-TS和JS 哪个更好
TS 在开发时就能给出编译错误， 而 JS 错误则需要在运行时才能暴露。
作为强类型语言，你可以明确知道数据的类型。如果喜欢类型安全的语言，推荐选择TS。
TS是JS的超集，在TS里也能识别JS代码，TS的设计是以兼容JS为目标。
5-泛型
指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定具体类型的一种特性。
6- 接口 Interfaces
TypeScript的核心原则之一是对值所具有的结构进行类型检查。我们使用接口（Interfaces）来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)
可选属性：？
只读属性：readonly
7- 函数
函数是 JavaScript 应用程序的基础，它帮助你实现抽象层，模拟类，信息隐藏和模块。在 TypeScript 里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。TypeScript 为 JavaScript 函数添加了额外的功能，让我们可以更容易地使用。
8-TS中的类
TypeScript 是面向对象的 JavaScript。而其中的类描述了所创建的对象共同的属性和方法。
对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。 从 ECMAScript 2015，也就是 ES6 开始， JavaScript 程序员将能够使用基于类的面向对象的方式。
TS相对于ES5有五大改善：类型、类、注解、模块导入、语言工具包（比如解结果）
TS相对于ES6,TS最大的改善是增加了类型系统
类的继承：
在 TypeScript 里，我们可以使用常用的面向对象模式。 基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。
公共，私有与受保护的修饰符：
public（默认）：可以自由的访问程序里定义的成员。 private：当成员被标记成 private 时，它就不能在声明它的类的外部访问。
protected：protected 修饰符与 private：修饰符的行为很相似，但有一点不同，protected成员在派生类中仍然可以访问。
静态属性：
到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。 我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。
抽象类：
抽象类做为其它派生类的基类使用。 它们不能被实例化。不同于接口，抽象类可以包含成员的实现细节。 abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法。
9- 构造函数
构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。而TypeScript的构造函数用关键字constructor来实现。可以通过this（和java/C#一样代表对象实例的成员访问）关键字来访问当前类体中的属性和方法。
10- 实例化是什么？
一般情况下，创建一个类后并不能直接的对属性和方法进行引用，必须对类进行实例化，即创建一个对象。TypeScript中用new
关键字创建对象。实例化后通过“.”来访问属性和方法
11- 方法重写是什么？
子类可继承父类中的方法，而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法，而是想作一定的修改，这就需要采用方法的重写
重写的作用在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。
12- never 和 void 的区别？
某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void。
拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回，无法终止，或会抛出异常
Vue3.0
1-Vue3.0新特性
a. proxy 响应式绑定 ：
- Vue2.x 内部是通过 Object.defineProperty 这个 API 去劫持数据的 getter 和setter 来实现响应式的。因为这个 API 它必须预先知道要拦截的 key是什么，所以它并不能检测对象属性的添加和删除。直接造成了数组元素的直接修改不会触发响应式机制。
- Vue3.0 使用了 Proxy API 做数据劫持，它劫持的是整个对象，自然对于对象的属性的增加和删除都能检测到，自然也不会在存在上述的问题。
- 通过 Proxy 实现双向响应式绑定，相比 defineProperty 的遍历属性的方式效率更高，性能更好，另外 Virtual DOM 更新只 diff 动态部分、事件缓存等，也带来了性能上的提升。
b.Tree-Shaking Support（树摇优化）
- tree-sharking 即在构建工具构建后消除程序中无用的代码，来减少包的体积。
- 相比 Vue2.x 导入整个 Vue 对象，Vue3.0 支持按需导入，只打包需要的代码。Tree-Shaking 依赖 ES2015模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记。像我们在项目中如果没有引入Transition、KeepAlive 等不常用的组件，那么它们对应的代码就不会打包进去。
c.组合式 API
首先需要明确的是，Vue2.x 中组件传统的 data，computed，watch,methods 写法，我们称之为选项式 API（Options API ）。
（1）选项式 API 存在的缺陷
随着业务复杂度越来越高，代码量会不断的加大；由于代码需要遵循 option 的配置写到特定的区域，导致后续维护非常的复杂，代码可复用性也不高。比如，很长的 methods 区域代码、data变量声明与方法区域未在一起。
（2）与 mixins 的比较
对于上述提到的问题，我们可能会想到会 mixins 来解决，但是当抽离并引用了大量的 mixins，你就会发现两个不可避免的问题：命名冲突和数据来源不清晰。
组合式 API 和 mixins 二者的差别：
- 层级不同：组合式 API 与组件是嵌套关系，而mixin与组件是同 层级关系
- 影响面不同：组合式 API 作为组件的被调用方，并且变量逻辑是组件控制，耦合性很低。而 mixins是耦合在代码逻辑里，并且存在变量的互相引用，为将来的升级和维护埋下隐患。
（3）与 React Hook 的比较
不可置否，组合式 API 的诞生确实受到了 React Hooks 的启发。对于使用者而言，使用一些概念时大同小异，这也不用就此贴上抄袭的标签，因为很多语言上都有相似的概念或者语法，比如 TS 可以规范变量的声明，但是 Java 中为了方便也出现了 var。事实上，组合式 API 的实现与 React Hook 是截然不同的。
组合式 API 使用上 比 React Hooks简便了不少：
- 同样的逻辑组合、组件复用能力
- 只调用一次 setup 方法
- 更加符合 JS 直觉
- 没有闭包变量问题
- 没有内存/GC压力
- 不存在内联回调导致子组件永远更新的问题
（4）组合式 API 的使用
下面简单概述了组合式 API 的使用，主要是一些 方法增加 和 概念迁移：
setup方法：
- vue3.0 中，所有的代码逻辑将在setup方法中实现，包括 data、watchcomputed、methods
等，并且不再有this。 - vue3.0 会先执行setup方法，再执行兼容2.x的其他方法。
- vue3.0 中setup方法在组件生命周期内只执行一次，不会重复执行。
生命周期钩子：
- 2.x 中生命周期钩子放在跟 methods 同级属性下。
- 3.x 中需要先导入钩子，然后在 setup 方法中注册钩子回调，并且钩子命名也跟 React 保持一样。
- 3.x 移除了 2.x 中的 beforeCreate 和 created 钩子，通过 setup 方法代替。
2-Vue 3.0 性能提升主要是通过哪几方面体现的？
响应式优化、编译优化、源码体积的优化
3-Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？—— 响应式优化
-
vue2在初始化的时候，对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用defineproperty使之变为响应式对象。
-
vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
a. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。 这也就是为什么 Vue 只能对 data
中预定义过的属性做出响应的原因，在Vue中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到setter监听的，这是defineProperty的局限性。b. Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
Proxy
可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。c. 响应式是惰性的
在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。 在 Vue.js 3.0 中，使用
Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。
4-Vue3.0 编译做了哪些优化？
详解
a. diff方法优化
- Vue2.x 中的虚拟dom是进行全量的对比。 Vue3.0中新增了静态标记（PatchFlag）：在与上次虚拟结点进行对比的时候，值对比带有patch flag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容化。
b. hoistStatic 静态提升
- Vue2.x : 无论元素是否参与更新，每次都会重新创建。 Vue3.0 :对不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用。
c. cacheHandlers 事件侦听器缓存
- 默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。
5- 源码体积的优化
使用tree-shaking
6- Vue3.0新特性 —— Composition API 与 React.js 中 Hooks的异同点
a. React.js 中的 Hooks 基本使用
- React Hooks 允许你 “勾入” 诸如组件状态和副作用处理等 React 功能中。Hooks
只能用在函数组件中，并允许我们在不需要创建类的情况下将状态、副作用处理和更多东西带入组件中。 - useState 和 useEffect 是 React Hooks 中的一些例子，使得函数组件中也能增加状态和运行副作用。
b. Vue Composition API 基本使用
- Vue Composition API 围绕一个新的组件选项 setup 而创建。setup() 为 Vue
组件提供了状态、计算值、watcher 和生命周期钩子。 - 并没有让原来的 API（Options-based API）消失。允许开发者 结合使用新旧两种 API（向下兼容）。
c. 原理
- React hook 底层是基于链表实现，调用的条件是每次组件被render的时候都会顺序执行所有的hooks。
- vue hook 只会被注册调用一次，vue
能避开这些麻烦的问题，原因在于它对数据的响应是基于proxy的，对数据直接代理观察。（这种场景下，只要任何一个更改data的地方，相关的function或者template都会被重新计算，因此避开了react可能遇到的性能上的问题）。 - react 中，数据更改的时候，会导致重新render，重新render又会重新把hooks重新注册一次，所以react复杂程度会高一些。