概览

Promise 简介

Promise 是 JS 中异步编程的新解决方案，让我们方便地使用同步地方式书写异步代码。它也被称作 暂未存在确切值的替身。

学习 Promise，你要先了解 JS 中的异步编程操作，比如 IO，AJAX，timeout 等。还有 js 事件循环模型。

Promise 出现前，获取异步任务的返回值，是通过设置回调函数。

Script setup 语法糖下 组件 的使用

1. 自动的组件名推断
   Vue 默认把 文件名 直接当成组件名，无需显式声明组件名。

2. 普通组件的使用
   组件不需要注册，引入直接使用。
   原理：setup script 在编译的时候把 template 的内容变成 vNode 后继而由 setup 函数中返回。

Vuex

1. 概念
   在 Vue 中实现集中式数据管理的一个 Vue 插件，对 vue 应用中多个组件共享数据进行集中式管理（读/写），也是一种组件间通信方式，且适用于任意组件间通信。

2. 何时使用
   多个组件需要共享数据时。

3. 搭建 vuex 环境
   创建文件 src/store/index.js

mixin 混入

功能：可以把多个组件公用的配置提取成一个混入对象。

定义混合

1
2
3
4
5

{
  data(){...},
  methods:{...}
  ....
}

使用混合

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

插件

功能：用于增强 Vue

本质：包含一个 install 方法的对象，install 的第一个参数是 Vue，第二个以后的参数是插件的使用者传递的数据。

常见问题：react、vue 中的 key 有什么作用？（key的内部原理）

虚拟 DOM 中 key 的作用
key 是虚拟 DOM 对象的标识，当数据发生变化时，Vue 会根据【新数据】生成【新的虚拟 DOM】
随后 Vue 进行【新虚拟 DOM】和【旧虚拟 DOM】的差异比较，比较规则如下：

对比规则：
旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
1. 若虚拟 DOM 内容没变，直接使用之前的真实 DOM！
2. 若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM。

旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key
创建新的真实 DOM，随后渲染到页面。

001 —— 初识 Vue

vue

查看 @vue/cli 版本，确保 @vue/cli 版本在 4.5.0 以上
vue --version
安装或升级你的 @vue/cli （全局覆盖安装）
npm install -g @vue/cli
创建
vue create xxxx
启动
cd xxxx
npm run serve

使用方法

1. 准备好一个容器
2. 创建 Vue 实例。
3. el 用于指定当前 Vue 实例为哪个容器服务，值通常为 css 选择器字符串。
4. data 用于存储数据，数据供 el 所指定的容器去使用，值我们暂时写成一个对象.

详细解答

1. 想让 Vue 工作，就必须创建一个 Vue 实例，且传入一个配置对象；
2. 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法；
3. 容器里的代码被称为 [ Vue 模板 ]；
4. Vue 实例和容器是一一对应的；
5. 真实开发中只有一个 Vue 实例，并且会配合着组件一起使用；
6. `{{xxx}}` 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性；
7. 一旦 data 中的数据发生改变，那么模板中用到该数据的地方会自动更新；

前言

对初学 web 前端的人来说，一个登录页面可能会是他们前端打怪生涯中的最初遇到的几个 Boss 之一。几乎任何系统都需要登录功能，因为登录功能是系统实现身份认证和访问控制的第一步。

很久以前，前端大牛们写一个登录页，都是新建一个 html 文件手撸一遍页面模板，新建一个 css 文件手撸一遍页面样式，再新建一个 js 文件手撸一遍登录逻辑。而现在，这种方式显得十分古老。我作为一个初探前端的新手，在经历各种尝试后，给大家介绍如何使用 vite+vue3+ typescriptanyscript 写一个登录页。

介绍登录

一个登录页中应该有什么，这应该是很多初学者需要面对的问题。在我看来，完成一次登录需要以下几个步骤：

1. 对于未持有令牌的匿名访客，只能允许其访问公共页面，否则跳转登录页。
2. 在登录页中提交身份认证的信息，例如账号、密码。
3. 后端通过后，返回一个标识身份的令牌，例如 token。
4. 使用令牌从后端获取用户信息，例如角色、权限。
5. 通过角色、权限为用户量身定做一个路由表。
6. 用户可以自由访问所给路由表中的全部网页

浅谈 typescript 装饰器

typescript 的装饰器，是个很尴尬的存在，从这个概念被提出以来，就一直在经历各种规范上的修改，直到现在还没有一种公认、稳定的规范拿上台。

装饰器是和 class 的概念相关的，从尤大的话来说，前端页面的交互逻辑使用 class 来写，可能并不是那么顺手。从 vue3 放出的 api 来看，vue3 最终还是选择了开放函数式编程的接口。用尤大的话来讲：设计一个 class 编程接口，要踩的坑实在是太多。

不过即使是冷门的语法，也阻止不了 好奇得闲 的我去 科研玩耍 一下。

什么是装饰器

说到装饰器，我们首先联想到的是 css。在编写 html 文档时，我们使用 css 写好页面的样式，然后通过 css 选择器将这些样式绑定到 html 标签。

浅谈 vue3 响应式原理 第三篇 ref、computed

能够坚持看到这里，实属不易，vue3 响应式的原理在前两篇已经讲得差不多了。

本篇作为一个补充，结合前面的内容，带大家了解 vue3 开放的2个 api：

ref 和 computed 的由来

回想起上一篇，我们把 Proxy 封装成了 Reactive 函数

通过它，我们对对象的读取、写入进行拦截，在拦截中插入记录和重放的操作，就能把普通的 javascript 对象变成响应式对象。