beforeCreate create setup 语法糖模式没有这两个生命周期

onBeforeMount：读不到 dom

onMounted：可以获取 dom

onBeforeUpdate：获取的是更新之前的 dom

onUpdated：获取的是更新之后的 dom



```html
<script setup lang="ts">
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from 'vue';
// 创建
onBeforeMount(() => {
  console.log('创建之前');
});
//
onMounted(() => {
  console.log('创建完成');
});
// 更新的钩子
onBeforeUpdate(() => {
  console.log('更新组件之前');
});
onUpdated(() => {
  console.log('更新组件完成');
});
// 销毁
onBeforeUnmount(() => {
  console.log('销毁之前');
});
onUnmounted(() => {
  console.log('销毁完成');
});
</script>
```

Vue3生命周期

# 1、ref, shallowRef, triggerRef, customRef, isRef

ref：可接收泛型，也可自行推断类型，支持所有类型，深层次的响应

ref 可读取 dom 属性

ref 取值和赋值都需要.value，reactive 不需要



```vue
<template>
  <div ref="form"></div>
  <button @click="getDom"></button>
</template>

<script setup lang="ts">
const form = ref<HTMLElement>();

const getDom = () => {
  cosole.log(form.value);
};
</script>
```

Ref：为 ref 的接口

isRef：判断对象是否为 ref 对象

shallowRef：浅层响应式性的，修改属性值时不会导致页面变化，需对 value 进行操作，只会修改到.value
ref 和 shallowRef 不能一起写，不然会影响 shallowRef 造成视图的更新

triggerRef：会强制更新收集的依赖

customRef：自定义 ref

```typescript
function MyRef<T>(value: T) {
  let timer: any;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newVal) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger();
        });
      },
    };
  });
}
```

# 2、readonly，isReadonly，reactive, isReactive, shallowReactive

readonly： 只读，无法修改对象属性值

isReadonly：是否为只读属性

reactive：只接收 object 类型

isReactive；判断对象是否为 reactive 对象

shallowReactive：与 shallowRef 类似，只会修改到第一个属性，不会影响视图

# 3、toRef, toRefs，toRaw

toRef：只能修改响应式对象的值，修改非响应式对象的值视图无变化

toRefs：用于批量解构响应式对象，解构后的属性依然为响应式

```typescript
const toRefs = (T extends object)(object: T) => {
  const map: any = {}
  for(let key in object) {
    map[key] = toRef(object, key)
  }
  return map;
}

```

toRaw：将 proxy 对象解构成原始对象

# 4、computed

监测属性值更新

```vue
<template>
  <div>姓：{{ firstName }} 名：{{ lastName }}</div>
  <button @click="changeName">修改</button>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
const firstName = ref('1')
const lastName = ref('2')

// 选项式修改
const value = computed({
  get () => {
    return firstName.value + '-' + lastName.value;
  },
  set (newVal) => {
    [firstName,lastName] = newVal.split('-');
  }
})

// 函数式获取
const value = computed(() => {
  return firstName.value + '-' + lastName.value;
})

const changeName = () => {
  value.value = '3-4';
}
</script>
```

# 5、watch、watchEffect

watch：监听值的变化，其中配置项有三个参数 deep、immediate、flush
deep：深度监听
immediate：立即执行回调函数
flush: pre：组件更新之前调用 sync：同步执行 post：组件更新之后执行

监听 reactive 时，immediate 默认开启
监听对象的某个属性时，需使用函数返回

watchEffect：高级监听器
传入一个函数，函数参数为一个函数，此方法在监听之前执行

Vue3常用指令

# Harbor 介绍

> [Harbor](https://goharbor.io/)是一款深受信赖的容器镜像管理平台。若欲部署Harbor，需先从GitHub下载指定版本的安装包。默认情况下，Harbor不附带证书，可在无外部网络连接的开发或生产环境中使用HTTP，但在生产环境应始终使用HTTPS以保障安全。



# 安装步骤

## 1. 下载与解压

从[GitHub](https://github.com/goharbor/harbor/releases)上下载指定版本的安装包

```bash
#下载
wget https://github.com/goharbor/harbor/releases/download/v2.10.3/harbor-offline-installer-v2.10.3.tgz

# 解压缩
tar -zxf harbor-offline-installer-v2.10.3.tgz

# 复制配置文件
cp harbor.yml.tmpl harbor.yml
```

## 2. 配置HTTPS

默认情况下，Harbor 不附带证书。可以在没有安全性的情况下部署 Harbor。但是，只有在没有连接到外部 Internet 的生产或开发环境中，才可以使用 HTTP。在非生产环境中使用 HTTP 会使您面临攻击。在生产环境中，请始终使用 HTTPS。
要配置 HTTPS，必须创建 SSL 证书。可以使用由受信任的第三方 CA 签名的证书，也可以使用自签名证书。
接下来使用 OpenSSL 创建 CA，以及如何使用 CA 对服务器证书和客户端证书进行签名。也可以使用其他 CA 提供程序，例如 Let's Encrypt。

**1. 以下操作在开发环境可忽略**

若不配置证书，需注释https，调整域名
```bash
hostname: 192.168.0.158

# http related config
http:
  # port for http, default is 80. If https enabled, this port will redirect to https port
  port: 80

# https related config
#https:
  # https port for harbor, default is 443
  #port: 443
  # The path of cert and key files for nginx
  #certificate: /your/certificate/path
  #private_key: /your/private/key/path
```

## 3. 生成 CA 证书私钥与证书(HTTP可忽略)

[参考链接](https://goharbor.io/docs/2.11.0/install-config/configure-https/)

```bash
openssl genrsa -out ca.key 4096
# 生成 CA 证书
openssl req -x509 -new -nodes -sha512 -days 3650 \
-subj "/C=CN/ST=Beijing/L=Beijing/O=example/OU=Personal/CN=<domain.com>" \
-key ca.key \
-out ca.crt
```

## 4. 运行安装脚本

```bash
./prepare
# 启动Harbor
./install.sh
```
如果运行存在问题，在harbor.yml目录执行`docker compose down -v`，会删除现有实例，数据保存在文件系统中，并不会因此丢失任何数据。
重新运行脚本后重启Harbor`docker compose up -d`

## 5. 配置Docker守护进程

如果未启用HTTPS，需配置`daemon.json`中的`insecure-registries`

```bash
vi /etc/docker/daemon.json
```

将宿主机IP填入`insecure-registries`

```json
{
  "registry-mirrors": [
    "https://hub.docker.com",
    "http://192.168.0.158"
  ],
  "insecure-registries" : ["http://192.168.0.158"]
}
```

## 6. 推送镜像到 Harbor

从 Docker 客户端登录 Harbor，`docker login yourdomain.com`
如果已将 443 端口映射到其他端口，请在命令中添加该端口。`nginx login`

`docker login yourdomain.com:port`

登录 Harbor 后，新增项目。

```bash
# 登录 Harbor
docker login 192.168.0.158 -u admin -p Harbor12345
# 将现有镜像打tag
docker tag 7aa694114453 192.168.0.158/goharbor/harbor-exporter:v2.10.3
# 推送到Harbor
docker push 192.168.0.158/goharbor/harbor-exporter:v2.10.3
# 从 Harbor 拉取，可从仓库中复制拉取镜像命令
docker pull 192.168.0.158/goharbor/harbor-exporter:v2.10.3
```

## 7、Harbor安装在Windows的缺点

> 一般来说也没人会这么干😅

由于 WSL 是默认安装在C盘的，后续将拉取到的镜像推送到 Harbor 时，C盘空间会持续减少。。。
当然可以将 [WSL](https://learn.microsoft.com/zh-cn/windows/wsl/use-custom-distro) 装在其他盘，具体操作可 [bing](https://cn.bing.com) 搜索

Windows(WSL) 安装 Harbor

### 1、前提条件

两台服务器（虚拟机）或者两个mysql服务
> eg：<br />
> 192.168.0.150（主库）<br />
> 192.168.0.151（从库）



### 2、将两台服务器都安装上 MYSQL

我使用的是 MySQL 8.0.27

### 3、主机配置

修改主机 `192.168.0.150` 的 `MYSQL` 配置文件

```bash
vim /etc/my.cnf
```

在里面插入

```bash
log-bin=mysql-log-bin
server-id=1
binlog-do-db=test
binlog-ignore-db=mysql
```

新建用户用于专门同步

```bash
# 登录
mysql -uroot -p
# 创建用户
use mysql;
create user 'my_slave'@'%' identified by '123456';
grant replication slave on *.* to 'my_slave'@'%';
flush privileges;
# 查看Master状态，从库需要用到
SHOW MASTER STATUS;
```

![image.png](https://cdn.netclub.top/images/9ca75fd7b0e220d6a986712167b68079.image.webp?imageslim)

### 4、从库配置
修改主机 `192.168.0.151` 的 `MYSQL` 配置文件
```bash
vim /etc/my.cnf
```
在里面插入
```bash
server-id=2
```
登录从库
```bash
mysql -uroot -p
mysql> use mysql;
# 设置连接主服务器
mysql> change master to
    -> master_host='192.168.0.151',
    -> master_user='my_slave',
    -> master_log_file='mysql-log-bin.000008',
    -> master_log_pos=156,
    -> master_password='123456',
    -> master_ssl=1;
# 启动 slave 线程
mysql> start slave;
# 查看 slave 状态(不用加分号)
mysql> show slave status\G

# 停止复制线程
mysql> stop slave;
```

![image.png](https://cdn.netclub.top/images/f1bb11e88fe3b22046ea0112bc6dd348.image.webp?imageslim)

### 5、查看是否同步

使用 Navicat 登录主库，新建 test 数据库，并新建表插入数据，检查从库是否同步。

### 6、参考链接
[MySQL8.0.16主从环境搭建（CentOS7）](https://www.cnblogs.com/LUA123/p/10776394.html)<br />[Mysql创建、删除用户](https://www.cnblogs.com/fly1988happy/archive/2011/12/15/2288554.html)<br />[MySQL的错误：No query specified](https://www.cnblogs.com/mrwang1101/p/5192854.html)<br />[MySQL binlog_ignore_db 参数最全解析 ](https://www.cnblogs.com/mysqljs/p/14085416.html)

MySQL8.0.27主从环境搭建（CentOS7）

## 缓存处理流程

前台请求，后台先从缓存中取数据，取到直接返回结果，取不到时从数据库中取，数据库取到更新缓存，并返回结果，数据库也没取到，那直接返回空结果。



### 缓存穿透

描述：

缓存穿透是指缓存和数据库中都没有的数据，而用户不断发起请求，如发起为id为“-1”的数据或id为特别大不存在的数据。这时的用户很可能是攻击者，攻击会导致数据库压力过大。

解决方案：

接口层增加校验，如用户鉴权校验，id做基础校验，id<=0的直接拦截；

从缓存取不到的数据，在数据库中也没有取到，这时也可以将key-value对写为key-null，缓存有效时间可以设置短点，如30秒（设置太长会导致正常情况也没法使用）。这样可以防止攻击用户反复用同一个id暴力攻击

### 缓存击穿

描述：

缓存击穿是指缓存中没有但数据库中有的数据（一般是缓存时间到期），这时由于并发用户特别多，同时读缓存没读到数据，又同时去数据库去取数据，引起数据库压力瞬间增大，（若对应的数据库查询又比较慢，会造成更大的压力）造成过大压力。

解决方案：

若数据库操作慢，首选解决慢操作问题

设置热点数据永远不过期。如电商项目中的爆款。

加互斥锁，若缓存中没有数据，第1个进入的线程，获取锁并从数据库去取数据，没释放锁之前，其他并行进入的线程会等待100ms，再重新去缓存取数据。或直接终止请求，前端展示请求失败提示，这样就防止都去数据库重复取数据，重复往缓存中更新数据情况出现。

### 缓存雪崩

描述：

缓存雪崩是指缓存中数据大批量到过期时间，而查询数据量巨大，引起数据库压力过大甚至down机。和缓存击穿不同的是，缓存击穿指并发查同一条数据，缓存雪崩是不同数据都过期了，很多数据都查不到从而查数据库。

另一种雪崩是缓存服务器某个节点宕机或断网，节点的宕机，对数据库服务器造成的压力是不可预知的，很有可能瞬间就把数据库压垮。

解决方案：

缓存数据的过期时间设置随机，分散过期时间，防止同一时间大量数据过期现象发生。以电商项目为例，一般是采取不同分类商品，缓存不同周期。在同一分类中的商品，加上一个随机因子。这样能尽可能分散缓存过期时间，而且，热门类目的商品缓存时间长一些，冷门类目的商品缓存时间短一些，也能节省缓存服务的资源。

如果缓存数据库是分布式部署，将热点数据均匀分布在不同得缓存数据库中。

设置热点数据永远不过期。

> 来自: [.缓存穿透、缓存击穿、缓存雪崩的理解](https://www.yuque.com/u316337/qmntbb/bkofk1)