三大常用ref介绍
ref用来定义响应式数据,注意这里使用按需导入,留意导入了什么!
- ref != Ref,我们用Ref指定类型,而ref是构造对象的
- 定义格式:const xxx = ref(info) ,info即定义值,可以是单个值或者一个对象(不能单个值和单个对象并列写在一起)
- (以下方代码为例)调用时message.value表示ref圆括号这一层定义的值
message.value.tags表示当ref接收一个对象时的对象内参数 - ref具有响应特性,即changeTag方法修改ref内部的值后,与该值绑定或是用插值语法调用的标签内容会同时发生变化
- ref忽略嵌套深度,也就是说ref接受的对象无论嵌套多少层对象都具有响应式特性
<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)强制使括号内属性进行同步(即触发一次响应)
import { triggerRef , shallowRef} from 'vue'
let message = shallowRef({
tags: 'helloworld'
})
const changeTag = () => {
message.value.tags = 'goodbyeworld'
triggerRef(message) // 强制触发响应
}