Vue3 to全家桶

最新推荐文章于 2025-02-22 10:06:50 发布

原创最新推荐文章于 2025-02-22 10:06:50 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Vue中用于处理响应式数据的三个关键函数：toRef、toRefs和toRaw。toRef用于将响应式对象的某个属性转换为响应式，适用于作为函数参数；toRefs则是将整个对象转换为响应式属性的对象，方便解构；toRaw则用于获取原始非响应式对象。理解这些工具的用法对于优化Vue应用的性能和数据管理至关重要。

to全家桶

1、toRef：将原始数据对象上的某个属性变为响应式的。

使用场景：将reactive对象中的某个属性提取出来作为函数的形参。

如果原始数据对象是非响应式的，就不会更新视图，数据会变；

import { toRef } from 'vue';
const obj = {
    num1: 1,
    num2: 2,
};
const state = toRef(obj, 'num1');
// 数据改变了但是页面不会改变

如果原始数据对象是响应式的，视图和数据均发生改变。

import { reactive, toRef } from 'vue';
const obj = reactive({
    num1: 1,
    num2: 2,
});
const state = toRef(obj, 'num1');
// 数据和页面均改变

2、toRefs：将原始数据对象上的所有属性变为响应式的。

手写toRefs：

import { toRef } from 'vue';
const toRefs = <T extends object>(object: T) => {
    const map: any = {};
    for (let key in object) {
        map[key] = toRef(object, key);
    }
    return map;
};

使用场景：解构reactive对象，解构赋值（诗句任然是响应式的）

注意：直接结构reactive对象，数据将失去响应式

3、toRaw：接收一个响应式对象作为参数，将响应式对象转化为普通对象。