toRef使用

1、作用：toRef是用来将对象中某一属性构成响应式的数据。

2、表达式：let 变量=toRef（对象，属性名称）

3、注意点：

a、toRef操作的是对象中的某一个属性。

b、toRef可以操作对象中嵌套对象的某一个属性。

c、toRef接收的对象是响应式对象。

4、使用：

代码如下：

<template>
  <div class="container">
    <h1>{{ name }}</h1>
    <button @click="changeInfo">修改信息</button>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    let user = reactive({ name: "张三" });
    let name = toRef(user, "name");

    let changeInfo = () => {
      console.log("名称", name);
      name.value = "李四";
    };
    return {
      name,
      changeInfo,
    };
  },
};
</script>
<style lang="scss" scoped></style>

toRefs的使用

1、作用：toRefs作用跟toRef类似，但是他是将对象中所有属性或者对象构成响应式的数据，供页面层使用。

2、表达式：let 变量=toRefs（对象）

3、注意点：

a、toRefs操作的是对象中所有属性或者嵌套对象。

b、toRef接收的对象是响应式对象。

c、访问某一个属性的值需要带上.value,不然显示“”。

4、使用：

代码如下：

<template>
  <div class="container">
    <h1>{{ name }}</h1>
    <h1>{{ userInfo.age }}</h1>
    <h1>{{ userInfo.age.value }}</h1>
    <button @click="changeInfo">修改信息toRef</button>
    <button @click="changeInfo2">修改信息toRefs</button>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    let user = reactive({ name: "张三",age:"30" });
    let user2 = reactive({ name: "王五",age:"35" });
    let name = toRef(user, "name");

    let userInfo =  toRefs(user2);

    let changeInfo = () => {
      name.value = "李四";
    };

    let changeInfo2 = () => {
      userInfo.name = "赵三";
    };

    return {
      name,
      userInfo,
      changeInfo,
      changeInfo2
    };
  },
};
</script>
<style lang="scss" scoped></style>

总结

从上面的使用中我们可以看到两者的几点相同和不同：

1、toRef针对的是对象中的某一个属性；

toRefs针对的是对象中所有属性和对象。

2、页面获取toRef的的值只需要属性名就行；

页面获取toRefs的值需要.value，不然页面显示“”。