Vue3中toRef的使用(彻底清楚搞懂toRef和toRefs是什么)

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

例：

首先我们知道为什么要用toRef和toRefs

比如我们使用 reactive来创建一个对象

<script>
import {
   reactive} from "vue";
export default {
   
  name: 'Toreftemp',
  components: {
   

  },
  setup(){
   
    let listData = reactive({
   
      title: '2021年vue3你还不会吗，那你Out了',
      content: "撒看到啦奥斯卡大奖阿斯顿阿斯顿",
      list: {
   
        shareNUm: 20,
        countall: 15
      }
    })

    return{
   
      listData
     
    }
  }
}
</script>

我们需要在模板中使用，那就得 listData.各种才能使用，listData.title listData.content

<template>
    <div>
        <h1>toRef和toRefs</h1>