toRef，toRefs函数的作用

最新推荐文章于 2025-02-14 09:14:14 发布

诗霖雪

最新推荐文章于 2025-02-14 09:14:14 发布

阅读量440

点赞数 2

分类专栏： vue笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_56713342/article/details/135852978

版权

vue笔记专栏收录该内容

24 篇文章

订阅专栏

本文介绍了Vue中如何使用`toRef`和`toRefs`方法将数据转换为响应式，特别关注了如何处理多层级数据以确保只有第一层是响应式的，以及在模板中的应用实例。

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

toRef:将数据转成响应式

toRefs:将多个数据转成响应式

注意：toRefs将多个数据转成响应式，只是确保第一层数据为响应式，如果是不同层的数据，仅第一层数据为响应式

<template>
  <div>
    <p>{{ name }}-{{ obj.name }}</p>
    <p>{{ job }}</p>
    <p>{{ city }}</p>
  </div>
</template>

<script setup>
import  { ref, toRef, toRefs,reactive} from 'vue'
const obj = reactive({
   name: 'zs',
   sex:'男',
   job: {
    jobname: 'h5工程师',
    city: 'shanghai'
   }
})
// 直接解构会丢失响应式
// const { name } = obj
// const name = toRef(obj, 'name') // 返回值是一个ref对象
// const city = toRef(obj.job, 'city')
// console.log(name.value);
const  { name, job} = toRefs(obj)
const { city } = toRefs(obj.job)

</script>

<style lang="scss" scoped>

</style>