vue3 的 ref、 toRef 、 toRefs-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 的 ref、 toRef 、 toRefs。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、ref: 对原始数据进行拷贝。当修改 ref 响应式数据的时候，模版中引用 ref 响应式数据的视图处会发生改变，但原始数据不会发生改变

<template>
  <div>{{refA}}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

let a = 1
const refA = ref(a) // 对原始数据 a 进行拷贝

refA.value = 12 // 此时模版视图引用 refA 的地方进行更新
console.log(a) // 此时原始数据 a 的值还是 1
</script>

2、toRef: 用于将对象中的某个属性转换成响应式数据。当修改 toRef 响应式数据的时候，原始数据会发生变化，但是模版中引用 toRef 响应式数据的视图处不会发生改变

<template>
  <div>{{toRefName}}</div>
</template>

<script lang="ts" setup>
import { toRef } from 'vue'

let obj = { name: 'bobo', age: 18 }
const toRefName = toRef(obj, 'name') // 将原始数据 obj 的 name 属性转换为响应式数据

toRefName.value = 'lili' // 此时模版视图引用 toRefName 的地方不更新
console.log(toRefName.value, obj.name) // 都变成 'lili'
</script>

3、toRefs: 用于将整个对象转换成响应式数据。当修改 toRefs 响应式数据的时候，原始数据会发生变化，但是模版中引用 toRefs 响应式数据的视图处不会发生变化文章来源地址https://www.toymoban.com/news/detail-706885.html

<template>
  <div>{{toRefsObj.name}} ---- {{toRefsObj.age}}</div>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'

let obj = { name: 'bobo', age: 18 }
const toRefsObj = toRefs(obj) // 将原始数据 obj 所有属性转换为响应式数据

toRefsObj.name.value = 'lili' // 此时模版视图引用 toRefsObj 属性的地方不更新
toRefsObj.age.value = 16 // 此时模版视图引用 toRefsObj 属性的地方不更新
console.log(toRefsObj.name.value, obj.name) // 都变成 'lili'
console.log(toRefsObj.age.value, obj.age) // 都变成 16
</script>

到了这里，关于vue3 的 ref、 toRef 、 toRefs的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！