Vue3 ref/shallowRef/triggerRef三大重要常用ref

118 阅读 0 评论 78 点赞

我是靠谱客的博主自然招牌，这篇文章主要介绍Vue3 ref/shallowRef/triggerRef三大重要常用ref，现在分享给大家，希望可以做个参考。

三大常用ref介绍

ref用来定义响应式数据，注意这里使用按需导入，留意导入了什么！

ref != Ref，我们用Ref指定类型，而ref是构造对象的
定义格式：const xxx = ref(info) ,info即定义值，可以是单个值或者一个对象（不能单个值和单个对象并列写在一起）
（以下方代码为例）调用时message.value表示ref圆括号这一层定义的值
message.value.tags表示当ref接收一个对象时的对象内参数
ref具有响应特性，即changeTag方法修改ref内部的值后，与该值绑定或是用插值语法调用的标签内容会同时发生变化
ref忽略嵌套深度，也就是说ref接受的对象无论嵌套多少层对象都具有响应式特性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script setup lang="ts">
import { ref } from 'vue'
let message = ref({
  tags: 'helloworld'
})
const changeTag = () => {
  message.value.tags = 'goodbyeworld'
}
</script>

<template>
  <div>
    <div>{{ message }}</div>
    <button @click="changeTag">点击换名</button>
  </div>
</template>

shallowRef
适用方法和ref一致，但他响应特性的波及范围只是xxx.value这一层，更深层的就不具有响应特性！

triggerRef
配合shallowRef一起使用；
可以使用triggerRef(xxx)强制使括号内属性进行同步（即触发一次响应）

复制代码

1
2
3
4
5
6
7
8
9
import { triggerRef , shallowRef} from 'vue'
let message = shallowRef({
  tags: 'helloworld'
})
const changeTag = () => {
  message.value.tags = 'goodbyeworld'
  triggerRef(message)   // 强制触发响应
}