Vue 的 reactive 会有人专门用吗？

[sikuu2al]

突然发现好像什么项目写变量都是 ref 一把梭了，没有专门用过这个 reactive 。op 记得刚学的时候还是非常仔细的区分变量类型的，是对象就用 reactive 。

[shintendo]

有，我们 vue2 遗老当 data 用

[1024629941CJJ]

不想写.value 就用

[LPJD]

ai 提供的代码有区分，开源项目也在用，应该还是有区别的

[hervey0424]

const state = reactive({})

[crocoBaby]

@hervey0424 +1,后面觉得太臃肿了,每次改变滚轮都要滚出火星子,又切回 ref 了

[Ketteiron]

简单变量肯定全是 ref ，我先假设你指的是对象用 reactive 还是 ref 包裹。
如果你写了很多 usehooks ，或许会发现 reactive 比 ref 更好用。
例如简化业务逻辑经常会自行封装 useTable/useForm 等参数，然后传递 api 类型，用泛型推断出参数和返回值类型。
此时可以用这样的写法
const params = reactive({}) as T
const model = reactive({}) as K
暂时用空对象欺骗下 ts 推断正确类型
而不是得到 T | null ，不得不写没必要的可选链，只要源头的类型是正确的，那么运行时实际也是安全的。

[4seasons]

u1s1 ，vue3 的响应式真就感觉设计的挺差强人意的

[jy02534655]

写列表和写表单的时候都用呀

[c3de3f21]

export function ref<T>(
value: T,
): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T>
export function ref<T = any>(): Ref<T | undefined>
export function ref(value?: unknown) {
return createRef(value, false)
}

function createRef(rawValue: unknown, shallow: boolean) {
if (isRef(rawValue)) {
return rawValue
}
return new RefImpl(rawValue, shallow)
}

class RefImpl<T = any> {

constructor(value: T, isShallow: boolean) {
this._rawValue = isShallow ? value : toRaw(value)
this._value = isShallow ? value : toReactive(value)
this[ReactiveFlags.IS_SHALLOW] = isShallow
}

}

export const toReactive = <T extends unknown>(value: T): T =>
isObject(value) ? reactive(value) : value

[shakaraka]

vue 真的心智负担太大了。直接 signal 吧真的。

[duuu]

ref 一把梭了。如果写 reactive 反而有心智负担需要考虑要不要.value 。

[tog]

写 hooks 必用的啊

[mizuhashi]

reactive 可以用來展平 ref ，我用這個來封裝對象：

function useXXX() {
const r = ref('xx')
const c = computed(() => r.value + 'yy')
function f() { r.value = 'zz' }
return reactive({
r,
c,
f
})
}

[metadata]

我记得 vue3 刚出来的时候，ref 和 reactive 在功能和性能上是有明显区别的，我也是分开写的。后来有个大佬把 ref 重写了，性能提升非常多，然后尤雨溪说可以用 ref 一把梭，然后我就再也没用过 reactive