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 的。
