vue3 toref和torefs

ref和toRef区别:

  ref->复制, 修改响应式数据不会影响原始数据
  
  toRef->引用, 修改响应式数据会影响原始数据
  
  ref->数据发生改变, 界面就会自动更新
  
  toRef->数据发生改变, 界面也不会自动更新

所以如果想让响应式数据和以前的数据关联起来，并且想在更新响应式数据的时候不更新UI，那么就使用toRef

用法：

<template >
  名字：{{silen.name}}
  <br>
  <br>
  年龄：{{toref_age}}
  <br>
  旧爱好：{{toref_favorite.before}}
  <br>
  新爱好：{{toref_favorite.now}}
  <br>
  <button @click="change">change</button>
</template>
<script>
import { reactive, toRefs, toRef } from "vue";
// 引入自定义hooks
export default {
  setup() {
    let silen = reactive({
      name: "小璃",
      age: "22",
      favorite: {
        before: ["吃吃吃", "玩玩玩", "喝喝喝"],
        now: ["打代码", "打代码", "打代码"],
      },
    });
    //把age变成ref 把favorite变成torefs
     let toref_age=toRef(silen,"age")
     let toref_favorite=toRefs(silen.favorite)
    function change() {
      toref_age.value++
      toref_favorite.now.value[0]="臭美臭美"
    }
    return {
      change,
      silen,
      toref_age,
      toref_favorite
      // age:toRef(silen,age)
    };
  },
};
</script>

<style>
</style>