vue-API-toRefs的使用

作用

toRefs()可以将一个响应式的对象，转换成普通对象。但是转换后的普通对象的每一个属性值都是响应式的
这样我们可以使用es6的对象解构或者三点运算符等操作

代码

<script setup>
import { reactive, toRefs, toRef } from 'vue';
const person = reactive({ name: "SunWuKong", age: 18 })
// 使用ES6进行解构,toRefs会将响应式对象的左右的属性变为响应式
let { name, age } = toRefs(person) // 结构出来的变量直接是就是响应式的ref
let refName = toRef(person, "name")
let refage = person.age

const changeName = () => person.name += "~"
const changeAge = () => person.age += 1

</script>

<template>
    <h2>toRefs</h2>

    <div>姓名:{{ name }},年龄:{{ age }}</div>

    <h2>toRef</h2>

    <!-- 当前的age就是非响应式的age，他不会变 -->
    <div>姓名:{{ refName }},年龄:{{ refage }}</div>

    <section>
        <button @click="changeName">修改姓名</button>

        <button @click="changeAge">修改年龄</button>
    </section>
</template>

Vue3 中 toRefs 的使用方式

需要注意的<font style="color:rgb(204, 204, 204);background-color:rgb(37, 37, 38);">toRefs 在 Vue3 中，当你使用 toRefs 解构 reactive 对象的属性后，这些属性会被转换为 ref，因此在使用它们时需要通过 .value 来访问。

toRefs 的行为

const data = reactive({
  queryParams: { /* ... */ },
  form: { /* ... */ },
  rules: { /* ... */ }
});

const { queryParams, form, rules } = toRefs(data);

在这种情况下：

• queryParams, form, rules 都是 ref
• 访问它们的值需要使用 .value

具体使用

在 JavaScript 中访问

// 正确方式
console.log(queryParams.value.dictType);

// 错误方式 - 会得到 ref 对象而不是实际值
console.log(queryParams.dictType);

在模板中使用

在模板中，Vue 会自动解包 ref，所以不需要 .value：

<template>
  <!-- 正确方式 - Vue 自动解包 -->
  <el-select v-model="queryParams.dictType">
    <!-- ... -->
  </el-select>
  
  <!-- 错误方式 - 不需要 .value -->
  <!-- <el-select v-model="queryParams.value.dictType"> -->
</template>

完整示例

<script setup>
import { reactive, toRefs, ref } from 'vue'

// 定义 reactive 数据
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    dictType: '',
    dictLabel: undefined,
    status: undefined
  },
  form: {},
  rules: {
    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
  }
});

// 使用 toRefs 转换为 ref
const { queryParams, form, rules } = toRefs(data);

// 定义 typeOptions
const typeOptions = ref([]);

// 初始化
onMounted(() => {
  getTypeList().then(res => {
    if (res && res.data && res.data.length > 0) {
      typeOptions.value = res.data;
      // 使用 .value 访问和修改 queryParams
      const matchedItem = res.data.find(item => item.dictId == route.params.dictId);
      if (matchedItem) {
        queryParams.value.dictType = matchedItem.dictType;
      }
    }
  });
});
</script>
<template>
  <!-- 在模板中直接使用，不需要 .value -->
  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
    <el-form-item label="字典名称" prop="dictType">
      <el-select v-model="queryParams.dictType" style="width: 200px">
        <el-option 
          v-for="(item,index) in typeOptions" 
          :key="item.dictId"
          :label="item.dictName" 
          :value="item.dictType"/>
      </el-select>
    </el-form-item>
  </el-form>
</template>

注意事项

1. JavaScript 中需要 .value：

// 修改值
queryParams.value.dictType = 'new value';

// 访问值
console.log(queryParams.value.dictType);

2. 模板中不需要 .value：

<!-- 正确 -->
<input v-model="queryParams.someProperty">

<!-- 错误 -->
<!-- <input v-model="queryParams.value.someProperty"> -->

3. 响应性保持：
   • 使用 toRefs 可以保持解构后的属性仍然具有响应性
   • 如果直接解构而不使用 toRefs，会失去响应性
4. 与普通 ref 的区别：
   • 普通 ref：直接使用 .value
   • toRefs 转换后的 ref：在 JavaScript 中使用 .value，在模板中自动解包

实践

1. 在模板中使用：直接使用属性名，不需要 .value
2. 在 JavaScript 中使用：始终使用 .value 来访问或修改值
3. 保持一致性：在整个应用中保持相同的使用方式，避免混淆

记住这个规则：**在 JavaScript 代码中需要 .value，在模板中不需要 **.value。这是 Vue3 中 ref 和 toRefs 使用的关键区别。