Vue笔记
## 说明 > 本文用于记录Vue一些函数、语法等技巧。主要基于`Vue3`。 > > 持续更新中。
渲染中...
## 说明
> 本文用于记录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;
```END
评论
登录后查看和发表评论
前往登录