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

三大常用ref介绍

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

1. ref != Ref，我们用Ref指定类型，而ref是构造对象的
2. 定义格式：const xxx = ref(info) ,info即定义值，可以是单个值或者一个对象（不能单个值和单个对象并列写在一起）
3. （以下方代码为例）调用时message.value表示ref圆括号这一层定义的值
   message.value.tags表示当ref接收一个对象时的对象内参数
4. ref具有响应特性，即changeTag方法修改ref内部的值后，与该值绑定或是用插值语法调用的标签内容会同时发生变化
5. 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)   // 强制触发响应
}

最后

以上就是自然招牌为你收集整理的Vue3 ref/shallowRef/triggerRef三大重要常用ref的全部内容，希望文章能够帮你解决Vue3 ref/shallowRef/triggerRef三大重要常用ref所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。