兄弟们,问个 Vue3 reactive 的问题

[Goalonez]

我不太懂前端，但是最近因为工作需要,所以尝试了一下 Vue3 + TS. 想问下 reactive 正确的更新数据做法应该是怎么样的?

下面是我的疑惑,比如我定义了一个 interface

export interface Demo {
  id: number;
  demoNumber: number;
  demoPrice: number;
  demoText: string;
  demoStatus: string;
  demoTime: number;
}

然后我创建了一个变量(不指定 Demo 类型,似乎编辑器上就没法对字段进行提示,并且我只希望在 interface 写一次属性而不用在其他地方重复写,所以加了 as Demo)

const demo = reactive({}) as Demo;

这时候我通过后端接口拿到了数据之后,我要怎么更新到这个用 reactive 响应式的 demo 对象里?我试了没办法直接 demo = 后端数据,或者 demo.value = 后端数据之类的赋值. 我看官方文档 ref 是用来定义基础数据类型的,可以直接.value 进行赋值,但是 reactive 不行,我搜了下只找到对象合并或者定义变量的时候多套一层数据结构,例如

const demo = reactive({ data: {} as Demo });

这样的话我确实可以对 demo.data = 后端数据进行赋值,但是这样我在取数据的时候都需要 demo.data.xxxxx,而无法直接用 demo.xxx 获取,就总感觉写起来怪怪的.

[zzlit]

reactive 接收一个泛型定义类型，但是这样就要给初始值了，如下：
const demo = reactive<Demo>({
id: xxx,
demoNumber: xxx,
demoPrice: xxx,
demoText: xxx,
demoStatus: xxx,
demoTime: xxx
});

更新的话只能 demo.id = xxx 这样，或者直接 Object.assign(demo, xxx)更新整个。

[MAGA2022]

用 ref

[yaodao]

如果要更新整个响应式对象，应该使用 ref ，reactive 一般适用于 data.a = xxx, data.b = xxx 这种对象中的单个属性更新的方式。

[zglw2012]

ref 其实就是 reactive({value:_})，把 interface 直接换成 class 会简单的多，const demo = reactive(new Demo())，此时 demo 还是有代码提示的，修改的时候直接在 class 里用 method 就行了。模板绑定的时候，直接绑定 demo.id ，调用方法就在模板里写 demo.method()

[smthok]

import { ref, Ref } from 'vue'

interface Demo {
id: number;
demoNumber: number;
demoPrice: number;
demoText: string;
demoStatus: string;
demoTime: number;
}

const demo = ref({}) as Ref<Demo>

demo.value.id = 1
demo.value.demoNumber = 2

[qb20150806]

interface Demo {
id: number;
demoNumber: number;
demoPrice: number;
demoText: string;
demoStatus: string;
demoTime: number;
}
const groundData=ref<Demo[]>([]);
groundData.value=[];

[Curtion]

使用 ref, 需要.value, 就是这么奇怪

[Goalonez]

感谢各位,目前已经改成了 ref 的方式,模板上可以做到不需要.value 直接绑定,函数里只能用.value 了.

[Daotin]

建议使用 ref 取代 reactive 。

顺便，这个写错了：const demo = reactive({}) as Demo;

应该是：const demo = reactive({} as Demo); 或者 const demo = reactive<Demo>({})

[jspatrick]

我的看法是全都 reactive 一把梭，这种情况 #1 提的 Object.assign 就很适合，除了获取 template 里的用 ref ，别的都能用 reactive 替代

[James2099]

import { reactive } from 'vue';

export interface Demo {
id: number;
demoNumber: number;
demoPrice: number;
demoText: string;
demoStatus: string;
demoTime: number;
}

const demo = reactive({} as Demo);

// 假设 newData 是从后端接口获取的新数据
const newData: Demo = {
id: 1,
demoNumber: 10,
demoPrice: 100,
demoText: 'Hello',
demoStatus: 'Active',
demoTime: 1632736800
};

// 用 Object.assign 更新 reactive 对象的数据
Object.assign(demo, newData);

[ljsh093]

@smthok #5 ref<Demo>({})

[ljsh093]

@ljsh093 #12 `ref<Demo>({})`

[ipcjs]

对前端不熟，还是 JS 一把梭吧，Vue3 对 TS 的支持贼蛋比🤪

[yrj]

还是看你业务需求吧，
只需要全量更新 ：ref
只需要个别属性更新：reactive
都需要更新：参考一楼的方法