说明

本文用于记录Vue一些函数、语法等技巧。主要基于Vue3。

持续更新中。。。

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;