vue3toRef的特点及使用

1、概念

●为源响应式对象上的某个属性创建一个ref对象，二者内部操作的是同一个数据值，更新时二者是同步关系。 ●区别ref: 拷贝了一份新的数据值单独操作，更新时互不影响。 ●应用: 当要将某个prop的ref传递给复合函数时，toRef很有用。

2、示例及代码 2.1、页面

<template> <h2>toRef的使用及特点:{ state }}{ age }}{ money }} defineComponent, reactive, toRef, ref } from "vue"; import Child from "./components/Child.vue"; export default defineComponent({ name: "App", components: { Child, }, setup() { const state = reactive({ age: 5, money: 100, }); // 把响应式数据state对象中的某个属性age变成了ref对象了 const age = toRef(state, "age"); // 把响应式对象中的某个属性使用ref进行包装,变成了一个ref对象 const money = ref(state.money); console.log(age); console.log(money); const update = () => { // 更新数据的 // console.log('测试') state.age += 2; // age.value += 3 // money.value += 10 }; return { state, age, money, update, }; }, }); 

2.2、子组件

<template> <h2>Child子级组件{ age }}{ length }} defineComponent, computed, Ref, toRef } from "vue"; function useGetLength(age: Ref) { return computed(() => { return age.value.toString().length; }); } export default defineComponent({ name: "Child", props: { age: { type: Number, required: true, // 必须的 }, }, setup(props) { const length = useGetLength(toRef(props, "age")); return { length, }; }, });