ref() & watch() 组合是不是等同于 Vue 3 中的 computed()？

Posted 2023-02-22

【中文标题】ref() & watch() 组合是不是等同于 Vue 3 中的 computed()？

【英文标题】：Is ref() & watch() combination equivalent to computed() in Vue 3?ref() & watch() 组合是否等同于 Vue 3 中的 computed()？

【发布时间】：2021-10-09 01:06:57

【问题描述】：

我有一个反应对象

team

它有一个属性

players

我还想让players 具有响应性（通过从自定义挂钩导出它来简化使用）。

这两段代码是等价的吗？

（我想他们不是，但我想知道使用其中一种方式的陷阱）

const players = computed(() => team.value.players);

const players = ref(team.value.players);

watch(team, () => players.value = team.value.players);

我应该使用哪一个？有很大的不同（优化？） v-model 的用法如何？

【参考方案1】：

建议将计算属性与 getter/setter 一起使用，以便能够将其绑定到 v-model：

const players = computed(
 get() => team.value.players,
 set(newVal)
 
 
);

【讨论】：

但是如果我使用计算属性并使用 set(newVal) ... 更改球员，这是否适用于球队对象的球员属性？

不，我认为这会造成无限循环