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

最新推荐文章于 2024-07-27 13:59:08 发布

Zhillery

最新推荐文章于 2024-07-27 13:59:08 发布

阅读量1.2k

点赞数 2

分类专栏： # Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/delete_you/article/details/125394673

版权

Vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文介绍了Vue中的ref、shallowRef和triggerRef的使用方法。ref用于创建响应式数据，shallowRef则只对最外层属性进行响应式处理，而triggerRef用于强制触发响应更新。通过示例代码展示了如何在模板中调用及修改ref值，并解释了ref的嵌套响应性特点。此外，还提到了shallowRef与triggerRef的配合使用，以确保深层属性的同步。

摘要由CSDN通过智能技术生成

三大常用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)   // 强制触发响应
}