toRefs与toRef

toRefs与toRef

在vscode中通过 鼠标左键 + Alt可以选中多行。

​ 作用：将一个响应式对象中的每一个属性，转换为ref对象。

​ 备注：toRefs与toRef功能一致，但toRefs可以批量转换，而toRef只能转换一个。

参考代码：

<template>
  <div class="person">
    <!-- <h2>姓名: {{person.name}}</h2> -->
    <h2>姓名: {{name}}</h2>
    <!-- <h2>年龄: {{person.age}}</h2> -->
    <h2>年龄: {{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { reactive, toRefs, toRef } from 'vue';

  //数据
  let person = reactive({
    name:'张三',
    age:18
  })
  
  //直接解构，解构出来的变量不是响应式的，所以template中无论是person.name 还是 name都不会改变
  //本质是定义两个变量分别赋值
  // let {name, age} = person;

  // let age = toRef(person, 'age');	//修改单个
  let {name, age} = toRefs(person); 	//直接解构，解构出来的变量不是响应式的，本质是定义两个变量分别赋值

  //方法
  function changeName () {
    // person.name += '~';
    name.value += '~';
    console.log(name.value);
  }

  function changeAge() {
    // person.age += 1;
    age.value += 1;
    console.log(age.value);
  }
</script>

<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px; /* 盒子阴影 */
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>