算法-数据结构基础2

学习了这么长时间的数据结构与算法，通过博客记录下个人的理解与总结，学习过程中多加思考，结合Java集合体系中的结构，思考换做自己要如何实现




# 数据结构

数据结构是算法的基石，只有掌握了数据结构，才能实现各种奇思妙想的算法

**基本概念**

数据结构整体分为线性结构、非线性结构的、散列表等，从物理存储的角度上来说，数据结构又分为物理结构和逻辑结构，物理结构只有数组、链表两种方式，逻辑结构基于数组、链表衍生出来的结构

![image.png](/static/img/7ccb49ea04934450db65bb7738b0b7bc.image.webp)

:::tip{title="重点掌握"}
将上图牢记于心，在脑海中形成自己对数据结构概念理解的轮廓，所有的数据结构都可以基于**物理结构**（也就是数组、链表）进行实现，无非就是逻辑结构上贴合顺序存储方式或者是链式存储方式。
:::

# 线性结构
线性结构是最简单的结构，其中的数据元素之间存在一种线性的关系，可以理解为是一种一维结构。
线性结构可以分为以下几种

## 数组
数组（array），是Java最基础常用的结构，数组中存储的称为元素。

**特点：**
- 数组创建以后，大小固定，是不可变的。  
- 数组中的元素在内存中是连续存储的，天然有序。  
- 每个元素对应着一个下标，可通过下标索引值快速定位到元素。  

:::info{title="相关信息"}
在java中，最经典的莫过于ArrayList的实现，底层使用数组结构，查询、修改效率高，对于插入数据超过数组长度时进行动态扩容，删除中间元素时对元素进行迁移，有兴趣可以阅读下源码
:::


## 链表
链表（Linked list）是一种链式结构，链表中的数据称为节点，每个节点数据中包含下一个节点的数据指针，一个链表由多个节点组成。

**特点：**
- 链表的长度可以动态改变，长度没有限制。  
- 链表中的节点可以在内存中的任意位置，非连续存储。  
- 通过指针来导航和访问链表中的元素。  

![image.png](https://blog.liushigong.cn/static/img/9dc99e421f99e5bfaa25c6bbbdc2b40d.image.webp)

根据以上特点，实现一个单向链表

```java
public class ListNode {
    Object val;
    ListNode next;

    ListNode() {
    }

    ListNode(Object val) {
        this.val = val;
    }

    ListNode(Object val, ListNode next) {
        this.val = val;
        this.next = next;
    }
}
```

:::info{title="相关信息"}
链表的实现分为多种，以上只是单向链表的实现，还存在双向链表，还有单向/双向循环链表，本质就是节点中存在一个指向下一节点的引用与上一节点的引用，即为双向，循环链表的本质就是尾节点的下一个节点从指向null，变成指向头节点，而头节点的上一节点引用从null，变成了指向尾节点
:::


**数组与链表对比**

数组与链表本身既是物理结构，同时也是逻辑结构，他们的优势各不相同  
数组适用于读多写少的场景  
链表适用于频繁插入与删除的场景  
<span style="color:red">**在Java中，经常把集合ArrayList 与 LinkedList 进行对比，本质对比的就是底层上不同结构的实现**</scan>

![image.png](/static/img/484d6211c50d74384e415810979fa998.image.webp)


## 栈

栈是一种特殊的线性数据结构，支持两种主要操作：压栈（push）和弹栈（pop），遵循先进后出（LIFO, Last In First Out）的原则。

**实现方式：**

数组：使用数组的一端作为栈顶，当需要压栈或出栈时，只需更新栈顶指针。

![image.png](/static/img/6ceb0411f017b24fe7fe6135b00fa926.image.webp)

```java
public class ArrayStack<T> {
    private static final int DEFAULT_CAPACITY = 10;
    private Object[] elements;
    private int top; // 栈顶指针

    public ArrayStack() {
        elements = new Object[DEFAULT_CAPACITY];
        top = -1; // 初始化为空栈
    }

    // 入栈操作
    public void push(T item) {
        if (top == elements.length - 1) {
            resize(); // 动态扩容
        }
        elements[++top] = item;
    }

    // 出栈操作
    public T pop() {
        if (isEmpty()) {
            throw new EmptyStackException();
        }
        T item = (T) elements[top];
        elements[top--] = null; // 帮助垃圾回收
        return item;
    }

    // 查看栈顶元素
    public T peek() {
        if (isEmpty()) {
            throw new EmptyStackException();
        }
        return (T) elements[top];
    }

    // 判断栈是否为空
    public boolean isEmpty() {
        return top == -1;
    }

    // 获取栈大小
    public int size() {
        return top + 1;
    }

    // 动态扩容方法
    private void resize() {
        int newSize = elements.length * 2;
        Object[] newArray = new Object[newSize];
        System.arraycopy(elements, 0, newArray, 0, elements.length);
        elements = newArray;
    }
}
```

链表：使用单向链表的头部作为栈顶，新元素总是添加到头部，出栈也是从头节点开始。

![image.png](/static/img/a259904c2ca8301cd587fbda5f387b42.image.webp)

```java
public class LinkedListStack<T> {
    // 链表节点定义
    private static class Node<T> {
        T data;
        Node<T> next;

        Node(T data) {
            this.data = data;
            this.next = null;
        }
    }

    private Node<T> top; // 栈顶节点
    private int size;    // 栈大小

    public LinkedListStack() {
        top = null;
        size = 0;
    }

    // 入栈操作
    public void push(T item) {
        Node<T> newNode = new Node<>(item);
        newNode.next = top; // 新节点指向旧栈顶
        top = newNode;     // 更新栈顶指针
        size++;
    }

    // 出栈操作
    public T pop() {
        if (isEmpty()) {
            throw new EmptyStackException();
        }
        T item = top.data;
        top = top.next; // 栈顶指针下移
        size--;
        return item;
    }

    // 查看栈顶元素
    public T peek() {
        if (isEmpty()) {
            throw new EmptyStackException();
        }
        return top.data;
    }

    // 判断栈是否为空
    public boolean isEmpty() {
        return top == null;
    }

    // 获取栈大小
    public int size() {
        return size;
    }
}
```

:::info{title="相关信息"}
栈结构更多的体现在历史的回溯上，在Java中，栈结构是我们接触的数据结构中最多的一种，我们常说的异常堆栈信息，就是使用栈，方法之间的调用都是通过栈来进行存储的。
:::


## 队列
队列是一种只允许在一端进行插入操作，在另一端进行删除操作的线性数据结构，遵循先进先出（FIFO, First In First Out）的原则。

**实现方式：**

数组：使用数组实现 **循环队列**，通过调整指针来模拟循环，从而提高空间利用率。

![image.png](/static/img/ad51c27bf9413a1192c3dc3f29acce14.image.webp)

```java
public class ArrayQueue<E> extends AbstractQueue<E> {
    private static final int DEFAULT_CAPACITY = 10;
    private Object[] elements;
    private int head;  // 队列头指针
    private int tail;  // 队列尾指针
    private int size;  // 当前元素数量

    public ArrayQueue() {
        elements = new Object[DEFAULT_CAPACITY];
        head = 0;
        tail = 0;
        size = 0;
    }

    // 入队操作 (队列满时自动扩容)
    @Override
    public boolean offer(E e) {
        if (size == elements.length) {
            resize();
        }
        elements[tail] = e;
        tail = (tail + 1) % elements.length;
        size++;
        return true;
    }

    // 出队操作
    @Override
    public E poll() {
        if (size == 0) return null;
        E element = (E) elements[head];
        elements[head] = null; // 帮助垃圾回收
        head = (head + 1) % elements.length;
        size--;
        return element;
    }

    // 查看队首元素
    @Override
    public E peek() {
        return size == 0 ? null : (E) elements[head];
    }

    // 队列大小
    @Override
    public int size() {
        return size;
    }

    // 动态扩容方法
    private void resize() {
        int newCapacity = elements.length * 2;
        Object[] newArray = new Object[newCapacity];
        // 将元素复制到新数组的连续位置
        if (head < tail) {
            System.arraycopy(elements, head, newArray, 0, size);
        } else {
            System.arraycopy(elements, head, newArray, 0, elements.length - head);
            System.arraycopy(elements, 0, newArray, elements.length - head, tail);
        }
        elements = newArray;
        head = 0;
        tail = size;
    }

    // 迭代器实现（简化版）
    @Override
    public Iterator<E> iterator() {
        return new Iterator<E>() {
            private int cursor = 0;

            @Override
            public boolean hasNext() {
                return cursor < size;
            }

            @Override
            public E next() {
                if (!hasNext()) throw new NoSuchElementException();
                return (E) elements[(head + cursor++) % elements.length];
            }
        };
    }

    // 清空队列
    @Override
    public void clear() {
        Arrays.fill(elements, null);
        head = 0;
        tail = 0;
        size = 0;
    }
}
```

链表：使用单向链表的头部和尾部作为队列的两端

![image.png](/static/img/4269f5739478e3b897f8f7ef3343f485.image.webp)

```java
public class LinkedQueue<E> extends AbstractQueue<E> {
    // 链表节点定义
    private static class Node<E> {
        E data;
        Node<E> next;

        Node(E data) {
            this.data = data;
            this.next = null;
        }
    }

    private Node<E> head;  // 队列头指针
    private Node<E> tail;  // 队列尾指针
    private int size;      // 队列大小

    public LinkedQueue() {
        head = null;
        tail = null;
        size = 0;
    }

    // 入队操作
    @Override
    public boolean offer(E e) {
        Node<E> newNode = new Node<>(e);
        if (tail == null) {
            head = tail = newNode;
        } else {
            tail.next = newNode;
            tail = newNode;
        }
        size++;
        return true;
    }

    // 出队操作
    @Override
    public E poll() {
        if (size == 0) return null;
        E element = head.data;
        head = head.next;
        if (head == null) {
            tail = null;
        }
        size--;
        return element;
    }

    // 查看队首元素
    @Override
    public E peek() {
        return size == 0 ? null : head.data;
    }

    // 队列大小
    @Override
    public int size() {
        return size;
    }

    // 迭代器实现
    @Override
    public Iterator<E> iterator() {
        return new Iterator<E>() {
            private Node<E> current = head;

            @Override
            public boolean hasNext() {
                return current != null;
            }

            @Override
            public E next() {
                if (!hasNext()) throw new NoSuchElementException();
                E data = current.data;
                current = current.next;
                return data;
            }
        };
    }

    // 清空队列
    @Override
    public void clear() {
        head = null;
        tail = null;
        size = 0;
    }
}
```

:::info{title="相关信息"}
队列还有一些其他类型：优先队列、双端队列  

优先队列：根据优先级进行出队，谁的优先级高谁先出队，其本质是在二叉堆的基础上进行实现。

![image.png](/static/img/18e628a6bbcfece03603e62816a9da0c.image.webp)

双端队列：采用双向链表结构，可以从头部入队出队，也可以从尾部入队出队

![image.png](/static/img/c9e459d8597e37a191c3c5121e19a7d4.image.webp)

:::

## 哈希表
哈希表（hash table）也叫做散列表，这种数据结构提供了键（Key）与值（Value）的映射关系。只要给出一个Key，就可以高效查找到它所匹配的Value，时间复杂度接近于O(1).

### 实现原理

哈希表本质就是一个数组，Value就是数组中的数据，而Key一般是字符串，通过哈希函数算法将Key转换成数组的索引

### 哈希冲突

由于数组的长度是有限的，如果插入的Value值越来越多时，不同的Key通过哈希函数计算出来的索引下标可能会相同，这就是哈希冲突也叫做哈希碰撞

哈希冲突时无可避免的，解决的方式有很多种，最常用的是开放寻址法、链表法。

**开放寻址法**

开放寻址法的思路很简单，就是当Key通过哈希函数计算出来的索引下标位置存在数据时，就往后移一位看是否存在数据，直到找到为空的下标位置进行存储。

**链表法**

哈希表中的数组不仅是一个Enrty，还是链表的头节点。每个Enrty对象都通过next指针指向下一个Entry节点，当新来的Entry的索引下标存在数据冲突时，则将当前Entry插入到链表的尾部即可。

![image.png](/static/img/7c34b840b5139c3e90dcbba773b7082b.image.webp)

当读取数据的时，根据当前哈希函数计算的索引位置，找到链表的头节点，然后从链表中找到Key对应的Enrty。

:::warning{title="思考？当链表过长时，读取效率下降如何处理"}
在极端情况下，如果很多键都映射到同一个桶（bucket），链表会变得很长，导致查询效率从O(1)退化为O(n)，性能下降明显。

回想下 `HashMap` 的源码实现，看下 `HashMap` 在 JDK1.8 中是如何优化链表过长问题的。

**HashMap 的优化：** 

到了Java 8，HashMap 引入了红黑树来优化这个问题。当链表的长度超过一定阈值时，链表会被转换成红黑树，这样查询的时间复杂度可以维持在O(log n)，比链表的O(n)要好很多。

当链表长度超过默认阈值8，且数组长度大于等于64时，才会将链表转换为红黑树。如果数组长度小于64，即使链表长度超过8，HashMap会选择先进行数组扩容，而不是立即转换结构。这是因为扩容可以减少哈希碰撞的概率，可能比转换为树更有效。

另外，红黑树的结构相比链表，虽然查询效率高，但插入和删除操作更复杂，需要维护树的平衡，所以在节点较少时，链表的性能可能更好。因此，HashMap在节点减少到6时会转换回链表，这样可以避免在频繁插入和删除时反复转换带来的性能损耗。

总结一下，HashMap解决链表过长的问题主要通过两个方法：一是当链表长度超过阈值且数组容量足够大时，将链表转为红黑树；二是通过扩容数组来减少哈希碰撞，从而间接减少链表长度。这两种方法结合起来，保证了HashMap在大多数情况下的高效性能。
:::

算法-数据结构基础1

一直想做一些自己的产品，记录下对前端知识的学习




Vue 是用于构建用户界面的 JavaScript 框架。

它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。


# Vue

## 创建Vue项目

在创建 Vue 项目以前，我们需要先安装 [Node.js](https://nodejs.org/zh-cn)。

### 基于 Vite 创建

Vue 官网推荐使用 Vite 创建项目

```shell
## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No
```

启动项目

```shell
cd <your-project-name>
npm install
npm run dev
```

构建项目（当你准备将应用发布到生产环境时，运行）

```shell
npm run build
```

### 基于 CLI 创建

> 备注：目前`vue-cli`已处于维护模式，官方推荐基于 `Vite` 创建项目。

```shell
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve
```


## API
Vue 的组件可以按两种不同的风格书写：**选项式 API** 和 **组合式 API**。

### 选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

```html
<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

### 组合式 API (Composition API)
通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与 <script setup> 改造后和上面的模板完全一样的组件：

```html
<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

## 响应式基础

### ref 创建：基本类型的响应式数据

- **作用：**定义响应式变量。
- **语法：**`let xxx = ref(初始值)`。
- **返回值：**一个`RefImpl`的实例对象，简称`ref对象`或`ref`，`ref`对象的`value`**属性是响应式的**。
- **注意点：**
    - `JS`中操作数据需要：`xxx.value`，但模板中不需要`.value`，直接使用即可。
    - 对于`let name = ref('张三')`来说，`name`不是响应式的，`name.value`是响应式的。
  
```html
<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import {ref} from 'vue'
  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
  let name = ref('张三')
  let age = ref(18)
  // tel就是一个普通的字符串，不是响应式的
  let tel = '13888888888'

  function changeName(){
    // JS中操作ref对象时候需要.value
    name.value = '李四'
    console.log(name.value)

    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
  function changeAge(){
    // JS中操作ref对象时候需要.value
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    alert(tel)
  }
</script>
```

### reactive 创建：对象类型的响应式数据

- **作用：**定义一个**响应式对象**（基本类型不要用它，要用`ref`，否则报错）
- **语法：**`let 响应式对象= reactive(源对象)`。
- **返回值：**一个`Proxy`的实例对象，简称：响应式对象。
- **注意点：**`reactive`定义的响应式数据是“深层次”的。
```html
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
</script>
```

### ref 创建：对象类型的响应式数据

- 其实`ref`接收的数据可以是：**基本类型**、**对象类型**。
- 若`ref`接收的是对象类型，内部其实也是调用了`reactive`函数。
    
```html
<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>
```

### ref 对比 reactive

宏观角度看：

> 1. `ref`用来定义：**基本类型数据**、**对象类型数据**；
>
> 2. `reactive`用来定义：**对象类型数据**。

- 区别：

> 1. `ref`创建的变量必须使用`.value`（可以使用`volar`插件自动添加`.value`）。
     >
     >    <img src="images/自动补充value.png" alt="自动补充value" style="zoom:50%;border-radius:20px" /> 
>
> 2. `reactive`重新分配一个新对象，会**失去**响应式（可以使用`Object.assign`去整体替换）。

- 使用原则：
> 1. 若需要一个基本类型的响应式数据，必须使用`ref`。
> 2. 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以。
> 3. 若需要一个响应式对象，且层级较深，推荐使用`reactive`。

### toRefs 与 toRef

- 作用：将一个响应式对象中的每一个属性，转换为`ref`对象。
- 备注：`toRefs`与`toRef`功能一致，但`toRefs`可以批量转换。
- 语法如下：
    
```html
<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>
```



## 基础指令

在Vue中，指令都是以`v-`开头的，每个指令都是 JavaScript 表达式

### v-text 与 v-html

`v-text` 用于设置元素的文本内容，`v-html` 指令用于设置元素的HTML内容

```html
<template>
  <p>{{ msg }}</p>
  <p v-text="msg"></p>
  <p v-html="msg"></p>
</template>

<script setup>
  import { ref } from 'vue';
  const msg = ref('<a href="http://www.baidu.com"> Welcome </a>');
</script>
```


:::info{title="v-text, v-html、{{ }} 的正确使用与区别"}
v-text 与 v-html 指令都可以更新页面元素的内容，不同的是，v-text 会将数据以字符串文本的形式更新，而 v-html 则会直接将数据作为 HTML 标签内容更新。

在更新数据时，{{ }} 表达式只会更新原本占位插值所在的数据内容，而 v-text 与 v-html 指令则更新整个标签内容。
:::

### v-model

`v-model` 指令用于实现双向数据绑定，它允许在表单元素（如输入框、选择框等）和数据之间进行双向绑定，从而实现数据的自动更新和显示。

#### v-model 的修饰符

##### .lazy 修饰符

在上面示例中默认情况下，v-model 指令在每次 input 事件触发后会将输入框的值与响应式的msg进行同步，添加 `.lazy` 以后，则转变为失去焦点同步。

```html
<template>
  {{ msg }}
  <div>
    双向绑定：<input v-model="msg" type="text"/>
  </div>
  <div>
    失去焦点后双向绑定：<input v-model.lazy="msg" type="text"/>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  const msg = ref('');
</script>
```

##### .number 修饰符

将用户输入的数据自动转换为数值类型

```html
<template>

  <input v-model="num1" type="text"/>
  <br/>
  <input v-model="num2" type="text"/>
  <br/>
  {{ num1 + num2 }}
  <br/>

  <input v-model.number="num3" type="text"/>
  <br/>
  <input v-model.number="num4" type="text"/>
  <br/>
  {{ num3 + num4 }}

</template>

<script setup>
  import { ref } from 'vue';
  const num1 = ref('');
  const num2 = ref('');
  const num3 = ref('');
  const num4 = ref('');
</script>
```

以上示例中 `.number` 修饰符绑定的值会想加，而不是字符串拼接，如果不想要修饰符，可以使用以下方式

```vue
{{ parseInt(num1) + parseInt(num2) }}
```

#### .trim 修饰符

将用户输入的数据自动去除首尾空格

```html
<template>
  <p>{{ msg }}</p>
  <input type="text" v-model.trim="msg"/> <br/>
</template>

<script setup>
  import { ref } from 'vue';
  const msg = ref('');
</script>
```

### v-cloak

模板语法有一个缺点: 可能会出现闪烁问题，即页面数据可能还没加载渲染完成，就提前出现了两对{}。

实际应用中可能就是Vue实例中的数据。例如，通过发送异步请求获取来自网络(服务器)的数据，由于网络或者数据量大，需要一定的时间，这个时候Vue中的数据(Data)尚没有数据，就不会去渲染视图，那么在视图中会提前看到类似{{msg}的情况，这给用户的体验很不好，所以在数据尚未加载渲染完成时不要让类似{{msg}}出现，那么如何解决呢?可以使用v-cloak 指令来解决。

使用 v-cloak 指令要配合CSS样式一起使用否则不会生效。 通过CSS样式先设置为不显示，在数据流染完成之后就会自动修改displs值为显示。

```html
<template>
  <div v-cloak>
    {{ message }}
  </div>
</template>

<script setup>
  import { ref,onMounted } from 'vue';
  const message = ref('123');
  onMounted(()=>{
    alert('挂载完毕')
  })
</script>

<style>
  [v-cloak] {
    display: none;
  }
</style>
```



### v-bind

v-bind 用来绑定标签上的属性（ src、href、title 等等） 或样式（style、class ）。

```html
<img v-bind:src="imgUrl" alt="">
```

v-bind 可以简写成 :
```html
<img :src="imgUrl" alt="">
```

修饰符

- camel - 将短横线命名的 attribute 转变为驼峰式命名。
- prop - 强制绑定为 DOM property (3.2+)。
- attr - 强制绑定为 DOM attribute (3.2+)。

示例

```html

<img v-bind:src="imageSrc" />


<button v-bind:[key]="value"></button>


<img :src="imageSrc" />


<img :src />


<button :[key]="value"></button>


<img :src="'/path/to/images/' + fileName" />


<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>


<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>


<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>


<MyComponent :prop="someThing" />


<MyComponent v-bind="$props" />


<svg><a :xlink:special="foo"></a></svg>
```


### v-on

给元素绑定事件监听器。缩写：@

修饰符

- stop - 调用 event.stopPropagation()。
- prevent - 调用 event.preventDefault()。
- capture - 在捕获模式添加事件监听器。
- self - 只有事件从元素本身发出才触发处理函数。
- {keyAlias} - 只在某些按键下触发处理函数。
- once - 最多触发一次处理函数。
- left - 只在鼠标左键事件触发处理函数。
- right - 只在鼠标右键事件触发处理函数。
- middle - 只在鼠标中键事件触发处理函数。
- passive - 通过 { passive: true } 附加一个 DOM 事件。

Vue 全家桶 - 基础命令

之前的Idea正版激活码到期后，我来更新一下破解版的操作，此版本适应于 IDEA 2023.3，低版本可以使用30天无限重置激活，废话不多说，直接上破解教程。



# Mac IDEA 2023.3 破解

## 下载破解包
链接: https://pan.baidu.com/s/1OdSP8XSH6larmGpUMPuVpg 
提取码: w3u2 
复制这段内容后打开百度网盘手机App，操作更方便哦

## 确认路径
此破解包安装后，会改变Mac系统的环境变量，且不能被删除（一旦破解包被误删， Idea启动就会报错），所以启动时一定确认好，我是将此破解包放到了IntelliJ IDEA.app 的包内容下

![image.png](/static/img/fa87e3de3969d6708b80af7529a9c8e0.image.webp)

## 修改破解包配置

### 修改 install.sh

![image.png](/static/img/d2f21644d2951630fbbb508cf683d046.image.webp)

将 BASE_PATH 的路径，修改为上面环节确认的路径
```sh
BASE_PATH="/Applications/IntelliJ IDEA.app/Contents/jetbra"
```

### 修改 idea.vmoptions

![image.png](https://blog.liushigong.cn/static/img/9be25916f052f4d9b077dcd9773eefad.image.webp)

将 -javaagent 路径修改为上面环节确认的路径

```sh
-javaagent:/Applications/IntelliJ IDEA.app/Contents/jetbra/ja-netfilter.jar=jetbrains
```

## 安装破解包

新建终端，打开上面环节确认的路径

![image.png](/static/img/6be2db2398ee03bd4e2f5986da657054.image.webp)

启动脚本
```sh
sudo bash ./install.sh
```

提示 `done. the "kill Dock" command can fix the crash issue.` 即为成功

![image.png](/static/img/567165e67810dc0372db4e184f555119.image.webp)

重启系统，命令`env`查看环境变量（重启以后的效果如下）：

![image.png](/static/img/430b77588fb8309e2f0014d1db5349dd.image.webp)


:::tip{title=""}
<span style="color:red">**成功后，Mac 系统的环境变量需要重启才会生效**</span>
:::


部分小伙伴 Mac 系统执行脚本遇到如下错误：

`sed: RE error: illegal byte sequence`

执行以下命令以后即可。
```sh
export LC_COLLATE='C'
export LC_CTYPE='C'
```

### 配置激活码

电脑重启以后，打开Idea，填入以下激活码激活即可。

    6G5NXCPJZB-eyJsaWNlbnNlSWQiOiI2RzVOWENQSlpCIiwibGljZW5zZWVOYW1lIjoic2lnbnVwIHNjb290ZXIiLCJhc3NpZ25lZU5hbWUiOiIiLCJhc3NpZ25lZUVtYWlsIjoiIiwibGljZW5zZVJlc3RyaWN0aW9uIjoiIiwiY2hlY2tDb25jdXJyZW50VXNlIjpmYWxzZSwicHJvZHVjdHMiOlt7ImNvZGUiOiJQU0kiLCJmYWxsYmFja0RhdGUiOiIyMDI1LTA4LTAxIiwicGFpZFVwVG8iOiIyMDI1LTA4LTAxIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBEQiIsImZhbGxiYWNrRGF0ZSI6IjIwMjUtMDgtMDEiLCJwYWlkVXBUbyI6IjIwMjUtMDgtMDEiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiSUkiLCJmYWxsYmFja0RhdGUiOiIyMDI1LTA4LTAxIiwicGFpZFVwVG8iOiIyMDI1LTA4LTAxIiwiZXh0ZW5kZWQiOmZhbHNlfSx7ImNvZGUiOiJQUEMiLCJmYWxsYmFja0RhdGUiOiIyMDI1LTA4LTAxIiwicGFpZFVwVG8iOiIyMDI1LTA4LTAxIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBHTyIsImZhbGxiYWNrRGF0ZSI6IjIwMjUtMDgtMDEiLCJwYWlkVXBUbyI6IjIwMjUtMDgtMDEiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiUFNXIiwiZmFsbGJhY2tEYXRlIjoiMjAyNS0wOC0wMSIsInBhaWRVcFRvIjoiMjAyNS0wOC0wMSIsImV4dGVuZGVkIjp0cnVlfSx7ImNvZGUiOiJQV1MiLCJmYWxsYmFja0RhdGUiOiIyMDI1LTA4LTAxIiwicGFpZFVwVG8iOiIyMDI1LTA4LTAxIiwiZXh0ZW5kZWQiOnRydWV9LHsiY29kZSI6IlBQUyIsImZhbGxiYWNrRGF0ZSI6IjIwMjUtMDgtMDEiLCJwYWlkVXBUbyI6IjIwMjUtMDgtMDEiLCJleHRlbmRlZCI6dHJ1ZX0seyJjb2RlIjoiUFJCIiwiZmFsbGJhY2tEYXRlIjoiMjAyNS0wOC0wMSIsInBhaWRVcFRvIjoiMjAyNS0wOC0wMSIsImV4dGVuZGVkIjp0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
    
![image.png](/static/img/0121ab5d9e0dcb40a4e6cc905869a413.image.webp)


激活日期到2025年8月，完美！

![image.png](/static/img/fab4e14a469a3b2e4160b4c2d1b27cf2.image.webp)

Mac IntelliJ IDEA 2023.3破解激活

整理一些阅读过的与收集的电子书籍



## 微服务

[《分布式服务架构.原理、设计与实战》](https://pan.quark.cn/s/c9c6e553eafd)

[《分布式文章汇总 v1.2 2021-03-23》](https://pan.quark.cn/s/8e11d4317fac)

[《深入分布式缓存 - 从原理到实践-完整版(带标签)》](https://pan.quark.cn/s/df627b816937)

[《Spring Cloud微服务全栈技术与案例解析》](https://pan.quark.cn/s/174887bc7fba)

[《Spring+Cloud与Docker微服务架构实战》](https://pan.quark.cn/s/6ad6ab7e7ff9)

## 提升功力

[《亿级流量网站架构核心技术》](https://pan.quark.cn/s/a95004051269)

[《深入理解Java虚拟机：JVM高级特性与最佳实践(第三版)》](https://pan.quark.cn/s/d2a5c5412590)

[《阿里工程师的自我修养》](https://files.alicdn.com/tpsservice/a3eafb12d315e3363de1e7dfd1daa0b7.pdf?spm=a2c4e.10696291.0.0.3e9d19a41uFUms&file=a3eafb12d315e3363de1e7dfd1daa0b7.pdf)

[《阿里巴巴 Java 开发手册 1.4.0》](https://ucc.alicdn.com/download/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4Java%E5%BC%80%E5%8F%91%E6%89%8B%E5%86%8C1.4.0.pdf)

[《设计模式之禅》](https://pan.quark.cn/s/1bcd447ac679)

[《大话数据结构》](https://pan.quark.cn/s/019241020062)

[《Spring 5核心原理与30个类手写实战》](https://pan.quark.cn/s/b33c4db659bc)

[《Spring源码深度解析（第2版）》](https://pan.quark.cn/s/286b31f6fe54)

[《SpringBoot学习笔记完整教程》](https://pan.quark.cn/s/d0a4acd7998f)

[《Docker中文手册》](https://pan.quark.cn/s/f721bf18c019)

[《阿里巴巴 DevOps 实践手册》](https://pan.quark.cn/s/0e8a5286d1fe)

[《鸟哥的linux私房菜_基础学习篇（第三版）》](https://pan.quark.cn/s/946c35bb6109)


## 中间件

[《Redis深度历险：核心原理和应用实践》](https://pan.quark.cn/s/2c10148e422b)

[《Redis开发与运维(完整版)》](https://pan.quark.cn/s/35f04b8819b2)

[《RabbitMQ系列教程》](https://pan.quark.cn/s/d4578c0b9696)

[《Redis 高手心法-码哥字节原创》](https://pan.quark.cn/s/d070ded7d89a)

[《Redis最佳实践与实战指南(阿里云出品)》](https://pan.quark.cn/s/b6bcf4c9a65e)

[《Rocketmq源码解析》](https://pan.quark.cn/s/40a74636d87c)

## Mysql

[《深入MySQL实战(阿里云出品)》](https://pan.quark.cn/s/7cad5afe831a)

[《高性能MySQL》](https://pan.quark.cn/s/e45129b39bb2)


## 并发编程

[《AVA并发编程实战》](https://pan.quark.cn/s/fa205d47fb76)

[《实战Java高并发程序设计》](https://pan.quark.cn/s/08e2fefb81fa)


## 面试相关

[《Java面试题合集最新版(485页)》](https://pan.quark.cn/s/fc14d50ad333)

[《JAVA面试核心知识点整理(283页)》](https://pan.quark.cn/s/e640785564ca)

[《互联网大厂面试题库大全》](https://pan.quark.cn/s/f019d87bacba)

[《程序员面试宝典-阿里出品》](https://pan.quark.cn/s/89e13b0ae2f5)

[《Java开发手册-灵魂13问(阿里出品)》](https://pan.quark.cn/s/867199916879)

## 全栈

[《Vue.js全家桶零基础入门到进阶项目实战》](https://pan.quark.cn/s/d739b9854550)

我的图书室

baidu-site-verification

本人自己的博客，对工作与学习过程中的总结、一些场景设计的实现方案、遇到过的疑难问题与解决、以及面试总结等。