xuan的博客

Vue 3 实现响应式，本质上是通过 Proxy API 劫持了数据对象的读写，当我们访问数据时，会触发 getter 执行依赖收集；修改数据时，会触发 setter 派发通知。（分析一下依赖收集和派发通知的实现（Vue.js 3.2 之前的版本）。

（1）定义没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法，它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件。（2）基本写法1、将functional设置为true2、.vue单文件组件写法propspropchildrenVNodeslotsdataparentlistenersdata.oninjections（4）优化原理。

二、TSConfig 中的 StrictFunctionTypes（1）StrictFunctionTypes配置项作用：在比较两个函数类型是否兼容时，将对函数参数进行更严格的检查（When enabled, this flag causes functions parameters to be checked more correctly），而实际上，这里的更严格指的即是 对函数参数类型启用逆变检查。（2）在禁用了 的情况下，TypeScript 并不会抛出错误。这是因为，在默认情况下，对函数参数的

（3）在上下文类型中，我们实现的表达式可以只使用更少的参数，而不能使用更多，这还是因为上下文类型基于位置的匹配，一旦参数个数超过定义的数量，那就没法进行匹配了。

实际上，infer + 约束的场景是非常常见的，尤其是在某些连续嵌套的情况下，一层层的 infer 提取再筛选会严重地影响代码的可读性，而 infer 约束这一功能无疑带来了更简洁直观的类型编程代码。而差集 Exclude 也是类似，但需要注意的是，差集存在相对的概念，即 A 相对于 B 的差集与 B 相对于 A 的差集并不一定相同，而交集则一定相同。这个标记，则移除它。1、使用 extends keyof any 标明，传入的 K 可以是单个类型，也可以是联合类型，而 T 即为属性的类型。

typescript类型系统层级

（1） TypeScript 的结构化类型系统是基于类型结构进行比较的，而标称类型系统是基于类型名来进行比较的。（2）在 TypeScript 中，可以通过为类型附加信息的方式，从类型层面或者逻辑层面出发去模拟标称类型系统。（3）类型、类型系统与类型检查类型：限制了数据的可用操作、意义、允许的值的集合，总的来说就是访问限制与赋值限制。在 TypeScript 中即是原始类型、对象类型、函数类型、字面量类型等基础类型，以及类型别名、联合类型等经过类型编程后得到的类型。

（1）类型别名如果声明了泛型坑位，那其实就等价于一个接受参数的函数。（2）类型别名中的泛型大多是用来进行工具类型封装，比如映射类型中的工具类型。Stringify 会将一个对象类型的所有属性类型置为 string ，而 Clone 则会进行类型的完全复制。（3） 类型别名与泛型的结合中，除了映射类型、索引类型等类型工具以外，还有一个非常重要的工具：条件类型。在条件类型参与的情况下，通常泛型会被作为条件类型中的判断条件（，或者）以及返回值（即两端的值），这也是我们筛选类型需要依赖的能力之一。

（1）TypeScript 存在两种功能不同的 typeof 操作符。我们最常见的一种 typeof 操作符就是 JavaScript 中，用于检查变量类型的 typeof ，它会返回 "string" / "number" / "object" / "undefined" 等值。而除此以外， TypeScript 还新增了用于类型查询的 typeof ，即 Type Query Operator，这个 typeof 返回的是一个 TypeScript 类型。

我们认识了类型工具中的类型别名、联合类型、索引类型以及映射类型。这些工具代表了类型工具中用于创建新类型的部分，但它们实现创建的方式却五花八门，以下这张表格概括了它们的实现方式与常见搭配。

（1）TypeScript 中表示任意类型。（2）除了显式的标记一个变量或参数为 any，在某些情况下你的变量/参数也会被隐式地推导为 any。比如使用 let 声明一个变量但不提供初始值，以及不为函数参数提供类型标注。以上的函数声明在 tsconfig 中启用了 noImplicitAny 时会报错，你可以显式为这两个参数指定 any 类型，或者暂时关闭这一配置（不推荐）。（3） any 类型的变量几乎无所不能，它可以在声明后再次接受任意类型的值，同时可以被赋值给任意其它类型的变量。

原型对象上的实例成员则会。

（1），它代表着比原始类型更精确的类型，同时也是原始类型的子类型。（2）字面量类型主要包括和，它们可以直接作为类型标注。（3）原始类型的值可以包括任意的同类型值，而字面量类型要求的是。（4）单独使用字面量类型比较少见，因为单个字面量类型并没有什么实际意义。它通常和联合类型（即这里的）一起使用，表达一组字面量类型。

这类似于 Object（想想。

当 async-validator 中常见的校验规则无法满足需求时，我们可以编写自定义的校验函数来校验数据。let errerr = '不符合规范'complex: [async-validator 支持对数据异步校验，所以在编写自定义校验函数时，不管校验是否通过，校验函数中的 callback 都要调用。

git cz 终端操作提示都是英文的，如果想改成中文的或者自定义这些配置选项，我们使用 cz-customizable 适配器。（5）cz-customizable 初始化项目运行如下命令使用 cz-customizable 初始化项目，注意之前已经初始化过一次，这次再初始化，需要加 --force 覆盖。

（2）这两个不同的原理，在 vue-router 中对应两个函数，分别是和。

（1）Vuex 是一个状态和数据管理的框架，负责管理项目中多个组件和多个页面共享的数据。（2）在开发项目的时候，我们就会把数据分成两个部分，一种数据是在某个组件内部使用，我们使用ref 或者 reactive定义即可，另外一种数据需要跨页面共享，就需要使用Vuex来进行管理（3）Vuex使用state定义数据，使用mutation定义修改数据的逻辑，并且在组件中使用 commit 去调用 mutations。

然后我们根据 v-move 的命名规范，设置 .flip-list-move 的过渡属性，就实现了列表依次出现的效果了。标签在进入和离开的时候，会有 fade-enter-active 和 fade-leave-active 的 class，进入的开始和结束会有 fade-enter-from 和 face-enter-to 两个 class。（3）响应式机制的进阶用法，那就是可以把一切项目中的状态和数据都封装成响应式的接口，屏蔽了浏览器的 API，对外暴露的就是普通的数据，可以极大地提高我们的开发效率。

1、Vue 2 内部所有的模块都是揉在一起的，这样做会导致不好扩展的问题。2、为了解决这个问题，Vue 3 进行了拆包，使用最近流行的 monorepo 管理方式，响应式、编译和运行时全部独立了3、Vue 3 的组织架构中，响应式独立了出来。而 Vue 2 的响应式只服务于Vue，Vue 3 的响应式就和 Vue 解耦了，你甚至可以在 Node.js 和 React 中使用响应式4、渲染的逻辑也拆成了平台无关渲染逻辑和浏览器渲染 API 两部分。