vue3学习ref 、isRef、shallowRef、triggerRef

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

feng_初学者

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

阅读量386

点赞数 1

分类专栏： vue3 文章标签： vue

本文链接：https://blog.csdn.net/qq_42356790/article/details/128466624

版权

vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了Vue3中用于响应式编程的关键API，包括ref用于创建响应式可变引用，isRef判断是否为ref对象，shallowRef创建浅层响应式引用，以及triggerRef用于在浅层引用的内部值深度变更后触发依赖更新。

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

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

<template>
  <div>
    <button @click="change">修改</button>
    <div>{{ message }}</div>
  </div>
</template>
 
<script setup lang="ts">
import {ref} from "vue"
//这种写法无法被响应式修改，只会修改值，不会响应页面
let message = "hello world"
//使用ref
let message2 = ref("hello world")
const change= () => {
   message = "change hello world"
   message2.value = "change hello world"
}
</script>

isRef

判断是不是一个ref对象

<script setup lang="ts">
import {ref,isRef } from "vue"
let message = "hello world"
let message2 = ref("hello world")
const change= () => {
 console.log(isRef(message )); //false
 console.log(isRef(message2 )); //true
}
</script>

shallowRef

创建一个跟踪自身 .value 变化的 ref，是浅层响应式数据。

<template>
  <div>
    <button @click="change">修改</button>
    <div>{{ message }}</div>
  </div>
</template>
 
<script setup lang="ts">
import {shallowRef } from "vue"
let message = shallowRef({
	res:"hello world",
})
const change= () => {
   message.value.res = "change hello world"  //不会进行监听修改
    message.value= {
		res:"change hello world",//会进行监听修改
	}  
}
</script>

triggerRef

官方解释：强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
意思是，在可以将浅层的ref，深层次的更新。

<template>
  <div>
    <button @click="change">修改</button>
    <div>{{ message }}</div>
  </div>
</template>
 
<script setup lang="ts">
import {shallowRef, triggerRef  } from "vue"
let message = shallowRef({
	res:"hello world",
})
const change= () => {
    message.value.res = "change hello world"  //不会进行监听修改
	triggerRef(message)//会被监听
}
</script>