:::tip{title="公司vpn配置(协议类型L2TP)（window笔记本）"}
本文介绍了（window笔记本）如何配置公司的vpn配置(协议类型L2TP)，别的也大同小异
:::


# 一、连接vpn地址

## （1）首先打开控制面板

![https://image.myxuechao.com/VPN/01.png](https://image.myxuechao.com/VPN/01.png)

## （2）点击网络和Internet

![https://image.myxuechao.com/VPN/02.png](https://image.myxuechao.com/VPN/02.png)

## （3）点击网络和共享中心

![https://image.myxuechao.com/VPN/03.png](https://image.myxuechao.com/VPN/03.png)

## （4）点击新的连接和网络

![https://image.myxuechao.com/VPN/04.png](https://image.myxuechao.com/VPN/04.png)

## （5）点击连接到工作区

![https://image.myxuechao.com/VPN/05.png](https://image.myxuechao.com/VPN/05.png)

## （6）这个时候会有一个你想使用一个已有的连接吗？ 选择否，创建新的连接，接着点击下一步

![https://image.myxuechao.com/VPN/06.png](https://image.myxuechao.com/VPN/06.png)

## （7）接着双击进入-使用我的Internet连接（VPN）

![https://image.myxuechao.com/VPN/07.png](https://image.myxuechao.com/VPN/07.png)

### 1、这个时候会有两个输入框
 1. Internet地址（I）:    **输入公司的vpn的Ip**
 2. 目标名称（E）:   **自己定义VPN名字（随便写）**
 3. 这个时候啥都不用点击了，接着点击右下角的创建就好了
![https://image.myxuechao.com/VPN/08.png](https://image.myxuechao.com/VPN/08.png)
    
### 2、然后点击刚才进来的网络和共享中心这个页面左侧会有一个 **更改适配器设置 点击他**

![https://image.myxuechao.com/VPN/09.png](https://image.myxuechao.com/VPN/09.png)

### 3、接着会看到自己的VPN ，点击当前的vpn 选中后鼠标右键点击属性

![https://image.myxuechao.com/VPN/10.png](https://image.myxuechao.com/VPN/10.png)

### 4、这个时候会有五个tab切换选项卡。点击安全然后跟下面图片勾选的一样了就可以了然后点击确认

![https://image.myxuechao.com/VPN/11.png](https://image.myxuechao.com/VPN/11.png)

### 5、然后在点击刚才进来看到的五个tab切换选项卡—的 网络，选中 Internet协议版本4（TCP/Ipv4）然后点下面的属性  进来后在在点击高级。勾选下面图片选中的 然后确认就好了

![https://image.myxuechao.com/VPN/12.png](https://image.myxuechao.com/VPN/12.png)

![https://image.myxuechao.com/VPN/13.png](https://image.myxuechao.com/VPN/13.png)

![https://image.myxuechao.com/VPN/14.png](https://image.myxuechao.com/VPN/14.png)

**恭喜你🎉第一步设置完毕**

# 二、配置注册表

> 如果这个时候连接vpn就会报错，所以需要配置一下注册表
> 

![https://image.myxuechao.com/VPN/15.png](https://image.myxuechao.com/VPN/15.png)

## （1）解决步骤

- **确保 **`IPsec Policy Agent`** 服务已经开启**

一般这个服务都是开启的，但有些情况，这个服务被某些进程关掉了，要手动开启下。

- Win+R 快捷输入services.msc进入服务列表
- 修改服务参数和我的一致即可

![https://image.myxuechao.com/VPN/16.png](https://image.myxuechao.com/VPN/16.png)

## （2）修改注册表

> 标题-`2.1 进入到Parameters子项`、`2.2 新建一个“ProhIbItIpSec”`、`2.3 修改“allowL2TPweakcryphto”`的值直接赋上操作视频观看
> 

进入注册表快捷方式：Win+R之后，输入 regedit 即可
<iframe
      scrolling="no"
      frameborder="0"
      style="width:100%;height:300px"
      src="https://image.myxuechao.com/VPN/17.mp4"
      allowfullscreen
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; controls"
    >
    </iframe>
    
 


## （3） 进入到Parameters子项

HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\Rasman\Parameters

## （4） 新建一个“ProhIbItIpSec”

- 在编辑菜单上，指向新建，然后单击DWORD 值。
- 键入****ProhIbItIpSec****，然后按 enter 键。
- 在编辑菜单上，单击修改。
- 在数值数据框中，键入1，然后单击确定。

## （5）修改“allowL2TPweakcryphto”的值

修改数值数据框中，把0改为1，然后单击确定。

## （6） 重启电脑

**在修改完注册表后，或者修改服务后，要使其生效，Windows上要重启电脑才行**

`最后在点击vpn就可以连接了`

## （7）最终连接VPN

## 注意事项

> 经过所有配置后，最终连接 **`VPN` 一定要输入`用户名`跟`密码`**
> 

![https://image.myxuechao.com/VPN/18.png](https://image.myxuechao.com/VPN/18.png)

![https://image.myxuechao.com/VPN/19.png](https://image.myxuechao.com/VPN/19.png)

## （8）点击连接

![https://image.myxuechao.com/VPN/20.png](https://image.myxuechao.com/VPN/20.png)

## 注意事项：
如果连上VPN后无法访问系统地址，需要cmd执行下面命令
route  -p  add  172.16.4.0  mask  255.255.254.0  192.168.100.3（本机获取的IP）

公司vpn配置(协议类型L2TP)（window笔记本）

# 
:::tip{title="图片懒加载"}
这里将了如何配置图片懒加载：提高网页性能的有效方法
:::
 
## 图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）

> 刷新页面 Network 的Img下面只会加载可视区域的图片-向下滚动就会加载新的图片
> 

<iframe
      scrolling="no"
      frameborder="0"
      style="width:100%;height:300px"
      src="https://image.myxuechao.com/vue/lazyImg.mp4"
      allowfullscreen
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; controls"
    >
    </iframe>
    
 

网页开发中，优化性能是至关重要的。一种常见的性能优化方法是延迟加载图片，以减少初始页面加载时间和带宽占用。本文将介绍如何使用 JavaScript 中的 **`IntersectionObserver`** 来实现图片懒加载，并提供了一个实用的代码示例。

## 什么是图片懒加载？

图片懒加载是一种技术，它使页面在初始加载时只加载可见区域内的图片，而不是一次性加载所有图片。当用户滚动页面时，这些图片会动态加载，从而减少了初始加载时间和资源消耗。

## 使用 IntersectionObserver 实现图片懒加载

在现代浏览器中，可以使用 **`IntersectionObserver`** 来实现图片懒加载。这个 API 允许您监测元素是否进入了视口（即可见区域），并在需要时触发回调函数。

下面是一个使用 **`IntersectionObserver`** 的 JavaScript 函数示例，它可以用来实现图片懒加载：

```jsx
/**
 * 图片懒加载
 * @param el dom 目标元素
 * @param arr 列表数据
 * @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
 */
import { nextTick } from 'vue';
export const lazyImg = (el, arr) => {
  const io = new IntersectionObserver((res) => {
    res.forEach((v) => {
      if (v.isIntersecting) {
        const { img, key } = v.target.dataset;
        v.target.src = img;
        v.target.onload = () => {
          io.unobserve(v.target);
          arr[key]['loading'] = false;
        };
      }
    });
  });
  nextTick(() => {
    document.querySelectorAll(el).forEach((img) => io.observe(img));
  });
};
```

这个函数接受两个参数：

- **`el`**：一个字符串，表示要懒加载的图片元素的 CSS 选择器。
- **`arr`**：一个数组，可能用于跟踪图片加载状态的数据。

## 如何使用 lazyImg 函数

要使用 **`lazyImg`** 函数来实现图片懒加载，您需要按照以下步骤操作：

1. 引入 **`lazyImg`** 函数，确保它可用于您的项目。
2. 在 HTML 中为需要懒加载的图片添加 **`data-img`** 和 **`data-key`** 跟 **`data-lazy-img-list`** 属性

**`:data-img="v.img"`**：这是一个自定义数据属性，以 **`data-`** 开头。它的作用是存储每个图片元素的实际图片的URL。在这个例子中，它将 **`v.img`** 的值分配给 **`data-img`**，其中 **`v`** 表示在循环中的当前数据对象，**`img`** 是数据对象中存储实际图片URL的属性

**`:data-key="k"`**：这也是一个自定义数据属性，用于存储每个图片元素的关键信息或索引。在这个例子中，它将 **`k`** 的值分配给 **`data-key`**，其中 **`k`** 是在循环中的当前索引，通常用于标识数据中的每个元素。

**`:data-lazy-img-list="k"`**：类似于上述属性，这是另一个自定义数据属性，它也存储了与图片元素相关的信息。在这个例子中，它将 **`k`** 的值分配给 **`data-lazy-img-list`**，用于标识图片元素。

```jsx
<el-row :gutter="15">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
            class="mb15"
            v-for="(v, k) in state.tableData.data"
            :key="k"
          >
                <div class="item-img" v-loading="v.loading">
                  <img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
                </div>
          </el-col>
        </el-row>
```

1. 调用 **`lazyImg`** 函数并传递选择器和数组作为参数。

```jsx
// 页面加载时
onMounted(() => {
  other.lazyImg("[data-lazy-img-list]", state.tableData.data);
});
```

## 数据结构

```jsx
const state = reactive({
  tableData: {
    data: [
	{
		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
		id: 1,
		loading: true,
	}
],
    total: 99,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
});
```

当用户滚动页面时，**`IntersectionObserver`** 将检测图片是否进入了可见区域。如果进入了可见区域，图片将被加载。



## **总结**

图片懒加载是一种有助于提高网页性能的有效方法。通过使用 **`IntersectionObserver`** 和上述示例中的 **`lazyImg`** 函数，您可以轻松地实现图片懒加载，并改善用户体验，减少页面加载时间和资源消耗。在网页开发中，性能优化是一个持续的过程，因此将这种技术集成到您的项目中是非常有益的。

图片懒加载：提高网页性能的有效方法

:::tip{title=" MongoDB数据安装"}
这篇文章提供了详细的步骤和指南，用于在本地安装和配置 MongoDB，包括下载安装包、解压、配置环境变量、启动 MongoDB 服务，并通过配置文件进行管理和关闭服务。重点在于如何手动设置 MongoDB 的数据和日志存储路径，以及如何通过配置文件和命令行来启动和关闭 MongoDB 服务。
:::


![思维导图](https://image.myxuechao.com/mongoDB/mongodb-10.png)
# 步骤一：下载安装包

## （1）首先从 MongoDB官网 下载安装包

[MongoDB官网](https://www.mongodb.com/zh-cn)

![https://image.myxuechao.com/mongoDB/mongodb-01.png](https://image.myxuechao.com/mongoDB/mongodb-01.png)

## （2）选择自己需要的版本、型号

![https://image.myxuechao.com/mongoDB/mongodb-02.png](https://image.myxuechao.com/mongoDB/mongodb-02.png)

# 步骤二：解压安装包

> 下载好安装包后解压后重新命名为`mongodb`  把它放在自己想放的位置我默认放在 `/usr/local` 这个地方
> 

在终端中输入：`open /usr/local` 就打开这个文件夹了

![https://image.myxuechao.com/mongoDB/mongodb-03.png](https://image.myxuechao.com/mongoDB/mongodb-03.png)

# 步骤三：配置环境变量

> 首先需要打开一个`bash_profile`的文件，配置环境变量
> 

## （1）在终端中输入命令

```jsx
 open ~/.bash_profile
```

## （2）配置环境变量

```jsx
export PATH=${PATH}:/usr/local/mongodb/bin
```

![https://image.myxuechao.com/mongoDB/mongodb-04.png](https://image.myxuechao.com/mongoDB/mongodb-04.png)

## （3）在终端中输入命令让配置生效

```jsx
source  .bash_profile
```

## （4）在终端中输入命令检查是否安装成功

```jsx
mongod --version
```

- **如果成功了则出现**

```jsx
db version v5.0.14
Build Info: {
    "version": "5.0.14",
    "gitVersion": "1b3b0073a0b436a8a502b612f24fb2bd572772e5",
    "modules": [],
    "allocator": "system",
    "environment": {
        "distarch": "x86_64",
        "target_arch": "x86_64"
    }
}
```

# 步骤四：配置与启动

> 如果你跟我一样是从官网上下载的 `mongoDB`那么你会发现在它的目录下是没有关于`日志`以及`数据`存放的位置的
> 

![https://image.myxuechao.com/mongoDB/mongodb-05.png](https://image.myxuechao.com/mongoDB/mongodb-05.png)

## 一、建立日志跟数据的文件夹

> 这里为了方便，我就把这两个文件夹建立在`mongoDB`的文件路径下，其实呢你建立在其他任何地方也都是ok的
> 

### （1）在 mongoDB 的文件路径下创建新文件夹

```jsx
# 使用 sudo 获取管理员权限
#创建存放数据库
sudo mkdir -p /usr/local/mongoDB/data/db
#创建存放日志
sudo mkdir -p /usr/local/mongoDB/log
```

### （2）在 mongoDB 的文件路径下赋予文件夹读写权限

> `username`  表示自己的电脑用户名称我的叫 `liuxuechao`
> 

给`data`跟`log` 两个文件夹分别赋予权限

```bash
 # 使用 whoami 命令来查看当前登录到计算机的用户名
 whoami
 # 给data跟log目录以及它们的所有子目录和文件的所有权，使它们都属于 liuxuechao 用户
 sudo chown -R liuxuechao /usr/local/mongodb/data
 sudo chown -R liuxuechao /usr/local/mongodb/log
```

## 二、启动mongodb服务

> **`（重点）`** MongoDB 是一个数据库系统，它包括了以下关键组件：
> 
- **数据库的服务器**
    - 数据库的服务器负责保存和管理数据。
    - 使用 **`mongod`** 命令来启动 MongoDB 服务器。
- **数据库的客户端**
    - 数据库的客户端用来与服务器交互，执行数据的增、删、改、查操作。
    - 使用 **`mongo`** 命令来启动 MongoDB 客户端。

### mongod - 启动服务器

使用 **`mongod`** 命令可以启动 MongoDB 服务器。服务器是MongoDB的核心组件，它负责管理和存储数据。启动服务器是为了使数据库处于运行状态，以便客户端能够连接并操作数据。

### mongo - 启动客户端

使用 **`mongo`** 命令可以启动 MongoDB 客户端。客户端是用于与服务器进行交互的工具，您可以使用它执行数据库操作，例如查询、插入、更新和删除数据。MongoDB 客户端允许您与数据库进行交互，并执行各种操作，从而管理和查询数据。

## （1）mongoDB启动 手动指定目录启动mongoDB

> 它比MySql启动复杂，需要手动指定 **`存储数据的位置`** 以及 **`对应日志的位置`**
> 

```jsx
mongod --fork --dbpath /usr/local/mongodb/data/db --logpath /usr/local/mongodb/log/mongo.log --logappend
```

**下面是对其各个参数的简洁解释：**

- **`mongod`**: MongoDB的可执行文件名，用于启动MongoDB服务器。
- **`-fork`** : 以守护进程方式运行MongoDB，将其作为后台进程运行。
- **`-dbpath`**: 指定MongoDB数据文件的存储路径，表示数据文件将存储在 `**/usr/local/mongodb/data/db`** 目录中。
- **`-logappend`**: 如果日志文件已经存在，将日志追加到现有文件的末尾。

## （2）验证是否启动成功

> 如果出现了下面图片选中的样子，证明启动成功
> 

![https://image.myxuechao.com/mongoDB/mongodb-06.png](https://image.myxuechao.com/mongoDB/mongodb-06.png)

## （3）这个时候在新打开一个窗口，输入mongo

> **如果出现下面图片的小箭头也可以证明启动成功**
> 

![https://image.myxuechao.com/mongoDB/mongodb-07.png](https://image.myxuechao.com/mongoDB/mongodb-07.png)

## （4）可以打开网址证明是否启动成功

> 浏览器输入 `http://127.0.0.1:27017/` 如果出现`It looks like you are trying to access MongoDB over HTTP on the native driver port.`证明启动成功。
> 

## （5） 简化mongoDB 启动命令

> 为了简化 **`启动 MongoDB`**  的过程，你可以创建一个 **`别名 (alias)`**。这个别名将使你只需输入 "`**mongod**`" 命令，而不必每次都键入完整的启动命令。这将让 MongoDB 的启动过程更加方便，不再需要记住或手动输入冗长的命令。
> 

### 1、使用文本编辑器（如 **`nano`** 或 **`vim`**）打开你的 shell 配置文件。通常，这个文件是 **`~/.bashrc`** 或 **`~/.bash_profile`**（取决于你使用的 shell）。

- **在配置文件中添加以下行**

```bash
alias mongod='mongod --fork --dbpath /usr/local/mongodb/data/db --logpath /usr/local/mongodb/log/mongo.log --logappend'
```

确保路径（**/usr/local/mongodb/data/db** 和 **/usr/local/mongodb/log/mongo.log**）适用于你的实际 MongoDB 数据目录和日志目录。

**保存文件并退出文本编辑器。**

### 2、重新加载你的  配置文件以使别名生效。在终端中运行以下命令

```bash
source ~/.bash_profile  # 如果你使用的是 ~/.bash_profile
```

### 3、启动

> 现在，当你在`终端`中`输入` "`mongod`" 时，它将自动以你指定的选项启动 MongoDB，无需再键入长命令。这样做将使启动 MongoDB 更加便捷和可记忆。
> 
- **在终端输入**

```bash
mongod
```

# 步骤五：关闭服务

> 在终端输入 `mongo` 后出现`小箭头`然后在小箭头后面输入下面的命令关闭服务
> 

## （1）首先切换管理员的角色

```jsx
use admin
```

## （2）输入下面命令，参数可写可不写

```jsx
db.shutdownServer({force:true})
```

出现 `server should be down…` 代表关闭服务，这个时候网址 `http://127.0.0.1:27017/` 刷新一下也是关闭的

![https://image.myxuechao.com/mongoDB/mongodb-08.png](https://image.myxuechao.com/mongoDB/mongodb-08.png)

# 步骤六：通过配置文件启动

> 通过 `mongodb.conf`  配置文件来启动，里面就是指明了你的日志所在的路径以及数据所在的路径  以及你的端口等等
> 

## （1）创建 mongodb.conf

 在 **`/usr/local/mongodb/`** 目录下，如果 **`etc`** 目录不存在，就创建一个 **`etc`** 目录，并将 **`mongodb.conf`** 文件放入其中。

```bash
#创建etc文件夹
mkdir -p /usr/local/mongodb/etc
#创建mongodb.conf文件
touch /usr/local/mongodb/etc/mongodb.conf
```

- **`mongodb`目录结构展示**

```jsx
├── LICENSE-Community.txt
├── MPL-2
├── README
├── THIRD-PARTY-NOTICES
├── bin
│   ├── install_compass
│   ├── mongo
│   ├── mongod
│   └── mongos
├── data
│   └── db
├── etc
│   └── mongo.conf
└── log
    └── mongo.log
```

## （2）修改 mongodb.conf

- `mongodb.conf` 里的配置

```jsx
# 有关所有选项的文档，请参见：
#   http://docs.mongodb.org/manual/reference/configuration-options/

# 日志数据的写入位置。
systemLog:
  destination: file
  logAppend: true
  path: /usr/local/mongodb/log/mongo.log

# 数据存储位置和方式。
storage:
  dbPath: /usr/local/mongodb/data/db
  journal:
    enabled: true

# 进程管理方式。
processManagement:
  fork: true  # 后台运行，使用fork方式

# 网络接口配置。
net:
  port: 27017
  bindIp: 127.0.0.1

# 安全性配置。
security:
  authorization: enabled
```

## （3）启动

### 根据配置文件启动mongoDB

```jsx
mongod -f /usr/local/mongodb/etc/mongodb.conf
```

其中包含了以下参数的解释：

- **`mongod`**: 命令行工具的名称，用于启动 MongoDB 服务器进程。
- **`f`**: 指定配置文件的路径（跟 **`-fork`** 一样都是表示在后台启动）。后面跟着 **`/usr/local/mongodb/etc/mongodb.conf`**，表示使用指定路径下的 **`mongodb.conf`** 文件作为 MongoDB 的配置文件。
- **`/usr/local/mongodb/etc/mongodb.conf`**: 指定 MongoDB 的配置文件路径。在这个例子中，配置文件位于 **`/usr/local/mongodb/etc/`** 目录下，并且文件名为 **`mongodb.conf`**。

## （4）输入完命令后查看是否启动成功

> 在终端中输入 `mongo` 如果出现`小箭头`你就发现启动成功了同样也可以去 `http://127.0.0.1:27017/`  查看是否启动成功
> 

# 步骤七：通过配置文件启动的服务关闭

> 如果你是和我一样，用mongoDB这个配置文件启动的时候 ，你会发现如果想要关闭的时候 ，会关闭不来出现下面的问题
> 

```jsx
Error: shutdownServer failed: {
	"ok" : 0,
	"errmsg" : "command shutdown requires authentication",
	"code" : 13,
	"codeName" : "Unauthorized"
} :
_getErrorWithCode@src/mongo/shell/utils.js:25:13
DB.prototype.shutdownServer@src/mongo/shell/db.js:441:19
@(shell):1:1
```

之所以出现这个原因是因为在配置文件中加入了 `security` 把它的权限给打开了

```jsx
# 安全性配置。 
security:
  authorization: enabled
```

# 步骤八：解决 security 把它的权限给打开了的问题

> **其实很简单，那么就是它没有权限给他赋予一个就好了**
> 

## （1）建立root用户

```jsx
db.createUser({user:"root",pwd:"123456",roles:[{role:"root",db:"admin"}]})
```

## （2）**登录**

```jsx
db.auth('root','123456')
```

## （3）赋予权限

```jsx
db.grantRolesToUser( "root" , [{role: "hostManager", db: "admin"}])
```

## （4）重新关闭一下mongoDB

```jsx
db.shutdownServer({force:true})
```

**最后出现 `server should be down…` 代表关闭服务**

MongoDB数据库安装（二）

:::tip{title="useState状态钩子用法"}
我们从三个方面来看useState的用法，分别是`声明`、`读取`、`使用（修改）`
:::
 

## useState的介绍

> **`useState`是react自带的一个hook函数，它的作用是用来声明状态变量。                          `useState`接受一个初始状态作为参数，并返回一个数组，数组的第一个元素是当前状态的值，第二个元素是用于更新状态的函数。我们从三个方面来看useState的用法，分别是`声明`、`读取`、`使用（修改）`然后说出他们的所有用法**
> 

## 1. 声明状态：

- 基本用法：使用初始状态值声明一个状态变量。

```jsx
const [state, setState] = useState(initialState);
```

其中：

- 🏷️ **`state`**：当前状态的值。
- 🏷️ **`setState`**：用于更新状态的函数。
- 🏷️ **`initialState`**：状态的初始值。

**`useState`** 返回一个包含当前状态和状态更新函数的数组。✨

- 初始状态可以是基本类型（如字符串、数字、布尔值等）或对象/数组。🌟

```jsx
const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'John', age: 25 });
const [list, setList] = useState([1, 2, 3]);
```

- 初始状态可以通过函数延迟初始化，只在初始渲染时执行一次。

```jsx
const [data, setData] = useState(() => fetchData());
```

## 2.读取状态：

- 使用解构赋值从状态数组中获取当前状态的值。

```jsx
const [stateValue] = useState(initialState);
```

例如，获取计数器的当前值：

```jsx
const [count, setCount] = useState(0);
console.log(count); // 输出当前计数器的值
```

## 3. 使用（修改）状态：

- **使用状态更新函数来改变状态的值。**

  **3.1 修改基本类型状态**

```jsx
const [count, setCount] = useState(0);

// 递增计数器
const increment = () => {
  setCount(count + 1);
};

// 设置计数器为特定值
const setToValue = () => {
  setCount(10);
};
```

**3.2 修改对象状态：**

```jsx
const [user, setUser] = useState({ name: 'John', age: 25 });

// 更新用户的年龄
const updateAge = () => {
  setUser({ ...user, age: user.age + 1 });
};

// 修改用户的姓名和年龄
const updateNameAndAge = () => {
  setUser({ ...user, name: 'Jane', age: 30 });
};
```

**3.3 修改数组状态：**

```jsx
const [items, setItems] = useState(['apple', 'banana', 'orange']);

// 添加新的水果到数组末尾
const addFruit = () => {
  setItems([...items, 'grape']);
};

// 删除数组中的第一个元素
const removeFirstItem = () => {
  setItems(items.slice(1));
};
```

**3.4函数式更新：**

**`setState`** 还可以接受一个函数作为参数，用于基于先前的状态计算新的状态：

- 这样可以避免在更新时依赖于当前状态的问题。

```jsx
setCount(prevCount => prevCount + 1);
```

- 注意，状态的更新是合并而不是替换，所以如果状态是对象或数组，更新函数只需提供要更改的属性或元素。

```jsx
setUser({ ...user, age: 26 }); // 修改用户对象的age属性
setArray(prevArray => [...prevArray, newItem]); // 添加新元素到数组
```

useState状态钩子用法

#

:::tip{title="Input值处理"}
 Input 输入框值的处理、可以过滤小数、整数、负数、保留几位等等
:::
> **场景分为以下四类**

- **只能输入整数** 📌
- **只能输入整数与负数** 📌
- **只能输入数字、负数、小数点(默认保留两位小数)** 📌
- **只能输入数字、小数点(默认保留两位小数)** 📌

### 方法说明
>**无论走那个场景都会有默认输入值处理逻辑**

`validateInput` 方法用于处理`输入值的逻辑`，并根据`指定的参数类型`对`输入值`进行验证和转换。

### 参数

- `value` (默认值: `''`)：要处理的输入值，可以是任意类型的字符串。
- `objType`：一个包含验证参数的对象，用于指定输入值的验证类型。它具有以下可选属性：
  - `integer` (默认值: `false`)：布尔值，只能输入整数。
  - `isNoPoint` (默认值: `false`)：布尔值，只能输入整数与负数。
  - `isPositive` (默认值: `false`)：布尔值，只能输入数字、负数、小数点(默认保留两位小数)。
  - `isValidNumber` (默认值: `false`)：布尔值，只能输入数字、小数点(默认保留两位小数)。
  - `decimalPlaces` (默认值: `2`)：一个数字，指定保留的小数点后的位数默认两位小数在`isPositive` `isValidNumber`这两个类型上可以使用

### 回调函数

- `callback`：一个回调函数，接收处理后的输入值作为参数。

```js
const validateInput = (value = '', objType, callback) => {
  let { decimalPlaces = 2 } = objType || {}

  // 默认的输入值处理逻辑
  const removeRedundantChars = (val) => {
    return val
      .replace(/-(?=.*-)/g, '') // 只保留第一个 - 清除多余的
      .replace(/^\./g, '') // 清除第一个字符是数字而不是 .
      .replace(/^0+(\d)/, '$1') // 清楚开头多余的0
      .replace('.', '$#$')
      .replace(/\./g, '')
      .replace('$#$', '.') // 只保留第一个. 清除多余的
  }
  value = removeRedundantChars(value)
  // 1. 只能输入整数
  if (objType.integer) {
    value = value.replace(/[^\d]/g, '')
    return callback(value)
  }

  // 2. 只能有整数与负数
  if (objType.isNoPoint) {
    value = value.replace(/[^\-?\d]/g, '').toString() // 只能输入数字和负号
    return callback(value)
  }

  // 3. 只能输入数字、负数、小数点（默认保留两位小数）
  if (objType.isPositive || objType.isValidNumber) {
    value = value.replace(/[^\-?\d.]/g, '').toString() // 清除数字和.以外的字符
    // 清除负号（仅适用于 objType.isValidNumber）
    if (objType.isValidNumber) {
      value = value.replace(/^-/g, '')
    }
    // 限制小数点后的位数，默认保留两位小数，可以传参限制小数点后的位数
    value = value.replace(
      new RegExp(`(\\.\\d{${decimalPlaces + 1},})$`),
      (match) => match.slice(0, decimalPlaces + 1)
    )
    return callback(value)
  }
}
```

### 示例

下面是一些示例，展示了不同的参数类型对输入值的处理逻辑：

**示例 1：只能输入整数**🌟

```js
validateInput('123abc', { integer: true }, (value) => {
  console.log(value) // 输出：123
})
```

**示例 2：只能有整数与负数**🌟

```js
validateInput('12-3abc', { isNoPoint: true }, (value) => {
  console.log(value) // 输出：-123
})
```

**示例 3：只能输入数字、负数、小数点（默认保留两位小数）**🌟

```js
validateInput('12.345abc', { isPositive: true }, (value) => {
  console.log(value) // 输出：12.34
})
```

**示例 4：只能输入数字、小数点（默认保留两位小数）**🌟

```js
validateInput('-12.345abc', { isValidNumber: true }, (value) => {
  console.log(value) // 输出：12.34
})
```

**示例 5：自定义小数点位数限制为 3 位**🌟

```js
validateInput(
  '12.34567abc',
  { isValidNumber: true, decimalPlaces: 3 },
  (value) => {
    console.log(value) // 输出：12.345
  }
)
```

通过传入不同的参数类型，你可以根据需求对输入值进行验证和处理。

## 在 Input 框中的用法

> 在上面的·`示例`中其实已经展示了方法的时候、那么我们现在来 Input 回调中用一遍

### 例子：vue3.0 中使用完整代码

> 我的要求：只能输入数字、保留三位小数、不可以输入负数 那么我们就可以使用`isValidNumber`这个类型、然后给方法传递 { isValidNumber: true, decimalPlaces: 3 }isValidNumber 为 true 然后保留三位小数

```js
<template>
  <div>
    <el-input
      style="width: 200px"
      v-model="inputValue"
      placeholder="请输入"
      clearable
      @input="handleInputValue"
    ></el-input>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";

export default {
  setup() {
    const inputValue = ref("");
    const state = reactive({});
    // input输入框的回调方法
    const handleInputValue = (value) => {
      // 处理输入值的逻辑
      validateInput(
        value,
        { isValidNumber: true, decimalPlaces: 3 },
        (value) => {
          inputValue.value = value;
        }
      );
    };

    const validateInput = (value = "", objType, callback) => {
      let { decimalPlaces = 2 } = objType || {};

      // 默认的输入值处理逻辑
      const removeRedundantChars = (val) => {
        return val
          .replace(/-(?=.*-)/g, "") // 只保留第一个 - 清除多余的
          .replace(/^\./g, "") // 清除第一个字符是数字而不是 .
          .replace(/^0+(\d)/, "$1") // 清楚开头多余的0
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", "."); // 只保留第一个. 清除多余的
      };
      value = removeRedundantChars(value);
      // 1. 只能输入整数
      if (objType.integer) {
        value = value.replace(/[^\d]/g, "");
        return callback(value);
      }

      // 2. 只能有整数与负数
      if (objType.isNoPoint) {
        value = value.replace(/[^\-?\d]/g, "").toString(); // 只能输入数字和负号
        return callback(value);
      }

      // 3. 只能输入数字、负数、小数点（默认保留两位小数）
      if (objType.isPositive || objType.isValidNumber) {
        value = value.replace(/[^\-?\d.]/g, "").toString(); // 清除数字和.以外的字符
        // 清除负号（仅适用于 objType.isValidNumber）
        if (objType.isValidNumber) {
          value = value.replace(/^-/g, "");
        }
        // 限制小数点后的位数，默认保留两位小数，可以传参限制小数点后的位数
        value = value.replace(
          new RegExp(`(\\.\\d{${decimalPlaces + 1},})$`),
          (match) => match.slice(0, decimalPlaces + 1)
        );
        return callback(value);
      }
    };

    return {
      ...toRefs(state),
      handleInputValue,
      inputValue,
      validateInput,
    };
  },
};
</script>
```
