Vue3——toRef和toRefs

toRef和toRefs作用

toRef和toRefs功能相同，都是将一个响应式对象中的每个属性，转成ref对象，但是toRefs可以批量转换。

语法：> let temp = toRef(对象.属性名)和let{temp1,temp2,temp3,...} = toRefs(对象）

模版中使用

运行结果

代码

  <template>
    <div class="root">
      <h2> 角色1姓名：{{ name }} </h2>
      <h2> 角色地区：{{ area }} </h2>
      <h2> 角色1武器：{{ weapon }} </h2>

      <button @click="changeRole1Name">更改角色1姓名</button>
      <button @click="changeArea">更改角色地区</button>
      <button @click="changeRole1Weapon">更改角色1武器</button>

    </div>
  </template>

<!--Vue 3 setup语法糖 -->
<script setup lang='ts' name="App">
import { reactive, ref, toRef, toRefs } from 'vue';

interface Role {
  //角色名字
  name: string;
  //角色所属地区
  area: string;
  //角色武器
  weapon: string;
}

//可以填泛型，也可以不填泛型
let role = reactive<Role>({
  name: "万叶",
  area: "稻妻",
  weapon: "苍古自由之誓"
})

let role1 = ref<Role>({
  name: "钟离",
  area: "璃月",
  weapon: "黑樱枪"
})

//使用toRef将role对象中的area属性取出，且取出的属性依然是保持响应式
let area = toRef(role.area);
//使用toRefs将role1对象中的多个属性批量取出，且依然保持响应式
let { name, weapon } = toRefs(role1.value);

const changeArea = () => {
  area.value = "枫原家";
}

const changeRole1Name = () => {
  name.value = "雷电将军";
}

const changeRole1Weapon = () => {
  weapon.value = "薙草之稻光";
}
</script>

<style scoped>
.root {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

.roles {
  background-color: rgb(211, 216, 218);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

h2 {
  width: 1000px;
}

button {
  margin: 0 5px;
}

div {
  margin: 10px;
}
</style>