> 🔊 dom类型断言是：HTMLElement





# 第一种方式
```html
<template>
  <div class="block-area" ref="area">
    <div v-for="i of 3" :key="i" class="block" ref="divs">
      {{ i }}
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive, toRef } from 'vue';





const area = ref<HTMLElement | null>(null);
// const arrBlock = ref<HTMLElement[]>([]);
const divs = ref<HTMLElement[]>();

onMounted(() => {

  //预留：
  //1.api传来block总数
  //2.block 长宽高，颜色，行为 由api传递
  const min = 50;
  const max = 150;

  divs.value?.forEach((element, index, array) => {
    console.log(`Element: ${element} 索引: ${index} ary: ${array}`);

    let h = Math.floor(Math.random() * (max - min + 1)) + min;
    let w = Math.floor(Math.random() * (max - min + 1)) + min;
    element.style.height = `${h}px`;
    element.style.width = `${w}px`;
    element.style.backgroundColor = `#000`;
  });


})





// const divs = (el: HTMLElement) => {
//   // 断言为HTMLElement类型的数组
//   if (el)
//     (arrBlock.value as Array<HTMLElement>).push(el);
// };
</script>
<style scoped lang='scss'>
.block-area {
  position: relative;
  .block {
    position: absolute;
  }
}
</style>
```

# 其他方式处理dom数组

```html

<div :ref="(el)=> boxHanddlde(el)"></div>


<div :ref="(el)=> boxArray.push(el)"></div>

<script lang='ts'>
let boxArray = reactive<any[]>([])
const boxHanddle(e:any){
    console.log(e)
}
onMounted(()=>{
    console.log(boxArray)
})
</script>

```

vue3操作dom

- [👍快捷启动工具 Dawnlauncher](https://dawnlauncher.com/)

工具收集汇总

- [老牌bootcss](https://v5.bootcss.com/docs/components/toasts/)

- [谷歌的一款](https://m2.material.io/components/banners/web#using-banners)
- [Bulma样式](https://bulma.io/documentation/overview/)






# Vue 相关 🎀

- [Vue.js 的头号组件库 Vuetify](https://vuetifyjs.com/en/components/buttons/)
- [也很不错的Quasar](https://quasar.dev/layout/gallery)
- [buefy](https://buefy.org/)

样式库选择

> 信号量作用用于控制对有限资源的访问





# 😀 主要操作

P（Proberen，尝试）操作：这个操作会尝试减少信号量的值。如果信号量的值大于零，那么它会被减一，表示请求资源成功。如果信号量的值为零，那么执行 P 操作的线程会被阻塞，直到信号量的值变为正数。

V（Verhogen，增加）操作：这个操作会增加信号量的值。每当有线程释放资源时，它会执行 V 操作。当信号量的值增加时，可能会唤醒因执行 P 操作而阻塞的线程。

# 🎀 相关代码

` System.Threading.Semaphore `

基于操作系统，适用于跨进程同步

` System.Threading.SemaphoreSlim ` 

轻量级版本，适用于同一进程内的线程同步，性能更高


# 🃏 示例Demo

```csharp

private static SemaphoreSlim semaphore = new SemaphoreSlim(3); // 允许最多 3 个线程同时访问资源

    static void Main(string[] args)
    {
        Task[] tasks = new Task[10];

        for (int i = 0; i < 10; i++)
        {
            tasks[i] = Task.Run(() => AccessResource());
        }

        Task.WaitAll(tasks);
    }

    static void AccessResource()
    {
        Console.WriteLine($"线程 {Thread.CurrentThread.ManagedThreadId} 正在等待访问资源...");
        semaphore.Wait(); // P 操作

        Console.WriteLine($"线程 {Thread.CurrentThread.ManagedThreadId} 已获得访问权限");
        Thread.Sleep(1000); // 模拟资源访问

        Console.WriteLine($"线程 {Thread.CurrentThread.ManagedThreadId} 已释放访问权限");
        semaphore.Release(); // V 操作
    }

```

信号量

# 原子性 Atomicity 概念

>  - 原子性意味着一个操作（或一系列操作）是不可分割的，即在执行过程中不会被其他操作打断
>  - 原子操作在某一时刻只能被一个线程执行，并且在操作完成之前，其他线程无法访问该操作正在处理的资源
>  - 有助于确保数据一致性和线程安全性
>  - 利用原子操作，确保数据的修改是一致的，避免竞争，常见多线程场景





# C#中原子性操作

 ` Interlocked.Add(ref x, y); ` 
 
 相加
 
 ` Interlocked.Decrement(ref counter); `
 
 递减
 
 ` Interlocked.Increment(ref counter); `
 
 递增
 
 ` int oldValue = Interlocked.Exchange(ref target, newValue); `
 
 将目标变量的值设置为新值，并返回操作前目标变量的值
 

` int oldValue = Interlocked.CompareExchange(ref target, newValue, expectedValue); `

如果目标变量的值等于预期值，则将目标变量的值设置为新值。返回操作前目标变量的值。