vue3中的ref、reative、toRef、toRefs

ref

是什么

生成值类型的响应式数据
可用于模板和reactive
通过.value修改值

为什么要.value

值类型没有引用关系 为了不丢失响应式 所以采用对象 并用value存值
并通过value属性的get和set实现响应式
类似computed的定义

小tips

命名尽量后面跟一个Ref 这样更清晰

还可以用来获取dom

reative

与ref的区别

toRef

概念

将一个响应式对象的某个属性变为ref 并具有响应式
当然 这种响应式是双向的

应用场景

解构属性时保持响应式（避免丢失响应性）​

import { reactive, toRef } from \'vue\';const state = reactive({ age: 20, name: \"张三\" });// ❌ 普通解构：直接取值，失去响应性！const { age } = state; // 此时 `age` 只是普通数字 20，修改它不会更新原对象或视图。// ✅ 使用 toRef：保持响应式连接const ageRef = toRef(state, \'age\'); // 修改 ageRef.value 会同步更新 state.age 和视图

在组合函数（Composable）中传递单个属性​
假设你需要编写一个复用逻辑，只关心响应式对象的某个属性：

// 组合函数：监听年龄变化function useAgeWatcher(ageRef) { // 要求传入 Ref 类型 watch(ageRef, (newAge) => { console.log(\"年龄变化：\", newAge); });}// 父组件setup() { const state = reactive({ age: 20, name: \"李四\" }); // ✅ 使用 toRef 传入可响应属性 useAgeWatcher(toRef(state, \'age\')); }

跨组件传递属性时保持响应式​

<!-- 父组件 --><template> <Child :ageRef=\"ageRef\" /></template><script setup>import { reactive, toRef } from \'vue\';const state = reactive({ age: 20 });const ageRef = toRef(state, \'age\');</script><!-- 子组件 Child.vue --><template> <button @click=\"ageRef.value++\">年龄+1</button></template><script setup>defineProps([\'ageRef\']); // 子组件修改 ageRef.value 会更新父组件的 state.age</script>

toRefs

概念

toRefs 接收一个响应式对象（由 reactive() 创建），返回一个新的​​普通对象​​。该对象的每个属性都是指向原对象对应属性的 ref 引用，而非原始值。这些 ref 会与源属性保持双向同步：修改 ref 会更新原对象，反之亦然

应用场景

组合式函数（Composable）的返回值
在自定义逻辑函数中返回 toRefs(state)，允许调用方解构使用属性而不破坏响应性

function useCounter() { const state = reactive({ count: 0 }); return { ...toRefs(state) }; // 解构后仍响应}const { count } = useCounter();

跨组件传递响应式属性

将 toRefs 解构的 ref 作为 props 传递给子组件，确保子组件接收的仍是响应式数据