vue3.0知识点总结（四）——toRef 精讲

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

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

应用：要将响应式对象中的某个属性单独的提供外部使用

扩展：toRef和toRefs功能一致，但可以批量创建多个ref对象，语法：toRefs（person）

1.先看一个示例代码

在这个代码中{{}}中读取对象中的属性显得很麻烦，对象.属性名这种方式。所以出现了toRef

<template>
  <div>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
  </div>
</template>

<script>
import { ref, reactive } from "vue";

export default {
  setup() {
    let person = reactive({
      name: "指尖舞者",
      age: 12,
        job:{
          type:'UI设计'
}
    });
    return {
      person,
    };
  },
};
</script>

2.用法：

 

3.再看一下toRefs

然而，假如我们的对象中有几百个属性那怎么办，那不是得写疯了，从而toRefs就用到了

注意： 但是对于对象嵌套上面的写法无法获取内层嵌套属性，解决在{{}}中一层一层选择