Vue笔记

## 说明

> 本文用于记录Vue一些函数、语法等技巧。主要基于`Vue3`。
> 
> 持续更新中。。。

<!-- more -->

## Vue3之ref和reactive

`ref` 和 `reactive` 都可以用于定义Vue3中的响应式对象，但有一些区别：
1. 可定义的数据类型不同：`ref` 支持所有的类型；`reactive`只可用于引用类型，如`Array`/`object`/`Map`/`set`。
2. 数据操作不一样：`ref` 取值/赋值都需要加 `.value`来操作数据；`reactive` 是不需要 `.value`。
3. 响应式破坏：`reactive`是`proxy`对象，不能直接赋值，否则会破坏响应式对象。（简单来说就是`reactive`定义的对象不能被重新赋值，否则会改变原本的对象，就不再是原来的对象了，所以也就不具有响应式的特点了）

下面是一些例子：
```typescript
// 正确：使用 ref 定义名为 ref_str 的字符串响应式对象
const ref_str = ref('aaa')
// 错误：reactive 不支持声明字符串类型数据
const reactive_str = reactive('aaa')
// 正确：使用 reactive 定义一个 Object 响应式对象，这个 Object 有一个 key 是 str 
const reactive_str_obj = reactive({str:'aaa'})


// 正确：修改 ref_str 的值为 bbb ，取值/赋值需要使用 .value 操作
ref_str.value = 'bbb'
// 正确：修改 reactive_str_obj 的属性 str 的值为 bbb
reactive_str_obj.str = 'bbb'

// 错误：重新赋值 reactive_str_obj 是不对的，将会改变 reactive_str_obj 的对象，也就失去了响应式特点
//     如果你这么做了，所有针对原先reactive_str_obj对象的操作都会失效
//     如：监听reactive_str_obj、页面数据绑定reactive_str_obj等
reactive_str_obj = {str:'bbb'}
```

## div动态ID并嵌入HTML

**使用```nextTick```函数**

- 父级vue，传入参数

```html
<OblongItem :i="id" />
```

- 子集vue，接收参数，并给予某个div动态id

```html
<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';

const id = ref<any>();

const props = defineProps(['i']);

onMounted(() => {
  id.value = props.i;
  nextTick(() => {
    if (!id.value) {
      return;
    }
    let span = document.getElementById('span-' + id.value);
    if (span) {
      span.innerHTML = '<h1>ABC</h1>';
    }
  });
})
</script>

<template>
  <div>
    <span :id="'span-' + id">
    </span>
  </div>
</template>
```

## 路由跳转和参数接收

- 手动路由跳转：在任意地方手动路由跳转页面

```typescript
import router from '@/router';

// uri为路由地址
router.push(uri);
```

- 参数接收：在被跳转页面接收跳转时传递过来的参数

```typescript
import router from '@/router';

// 路由地址应为 /uri?i=xxx，其中i为参数名，xxx为参数值
const i = router.currentRoute.value.query.i;
```