vue3中ref以及toRefs和toRef的作用、区别？

ref概念

ref是对原始数据的拷贝，当修改ref数据时，模板中的视图会发生改变，但是原始数据并不会改变。
ref生成值类型的响应式数据,ref用来定义，基本类型数据 取值的时候通过 .value修改值。

toRef / toRefs

toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref，而且它既保留了响应式，也保留了引用，也就是你从 reactive 复制过来的属性进行修改后，除了视图会更新，原有 ractive 里面对应的值也会跟着更新，它复制的其实就是引用 + 响应式 ref。

不加 s 和 加 s 的区别就是这样：

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

toRef代码

<template>
 <div>
    <h2>toRef</h2>
    <h4>toRef_name:【 {{ newname }}】</h4>
    <h4>toRef_age: 【{{ newage }}】</h4>
    <button @click="onchangename">点击改变name名称</button>
    <button @click="onchangeage">点击改变age属性</button>
    <hr />
  </div>
</template>
<script setup>
//使用setup便捷语法糖形式进行编写
let info = reactive({
  name: "张三",
  age: 18,
});
//复制生成info中的age属性
let newage = toRef(info, "age");
let newname = toRef(info, "name");
const onchangeage = () => {
  newage.value += 1;
};
const onchangename = () => {
  newname.value += '~';
};

</script>

toRef效果

toRefs代码

<template>
   <div>
    <h2>toRefs</h2>
    <h4>姓名: {{ person.name }}</h4>
    <h4>年龄: {{ person.age }}</h4>
    <button @click="onchangename">点击改变name名称</button>
    <button @click="onchangeage">点击改变age属性</button>
    <hr />
  </div>
</template>

<script setup>
import { reactive, toRef, toRefs } from "vue";
let person=reactive({name:'Jack',age:18})
let refage=person.age  // ——>此写法不能改变toRef年龄值
let {name,age}=toRefs(person)

const onchangeage = () => {
  person.age +=1
};
const onchangename = () => {
  person.name +='*Jack'
};

</script>

toRefs效果

toRefs

*template 要想访问 toRefs 的值，需要带上 .value 如果不带上，就会出现双引号。
*template 要想访问 toRef 的值，不需要带上 .value

实际应用场景

<template>
  <h2>x: {{ x }}</h2>
  <h2>y: {{ y }}</h2>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    // 封装位置函数
    function usePosition(state, x, y) {
      const position = reactive({
        x: 0,
        y: 0,
      });
      // 绑定鼠标移动事件
      const onMouseMove = (event) => {
        position.x = event.x;
        position.y = event.y;
      };
      window.addEventListener("mousemove", onMouseMove);

      // 返回出去
      return toRefs(position);
    }

    // 接受 x, y 位置    usePosition函数通过 toRefs 返回一个响应式的数据，然后直接拿来就用
    const { x, y } = usePosition();
    return {
      x,
      y,
    };
  },
};
</script>

toRefs响应式

将它放到 js 文件里面去，在需要的地方引入进来即可，无需再去重复声明，这两属性就是用来避免重复声明 reactive 的。