2023-02-10
温故知新
00
请注意,本文编写于 669 天前,最后修改于 257 天前,其中某些信息可能已经过时。

目录

说明
Vue3之ref和reactive
div动态ID并嵌入HTML
路由跳转和参数接收

说明

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

持续更新中。。。

Vue3之ref和reactive

refreactive 都可以用于定义Vue3中的响应式对象,但有一些区别:

  1. 可定义的数据类型不同:ref 支持所有的类型;reactive只可用于引用类型,如Array/object/Map/set
  2. 数据操作不一样:ref 取值/赋值都需要加 .value来操作数据;reactive 是不需要 .value
  3. 响应式破坏:reactiveproxy对象,不能直接赋值,否则会破坏响应式对象。(简单来说就是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;
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!