Vuejs 组合 API - 属性更改

Question

我很好奇将 props 传递到 setup 以及根据属性更改更新变量/模板的最佳实践。

我很好奇reactive 和computed。

例如：

setup(props) {
  // Setup global config settings
  const config = computed(() => {
    return {
      // See if the component is disabled
      isDisabled: props.disabled, // (1)

      // Test for rounded
      isRounded: props.rounded // (2)
    }
  })

  return { config }
}

1. 是否应该将config.isDisabled 和config.isRounded 包装在它们自己的computed 函数中，因为它们既不同又独立？但是，很容易将它们粘在一个大功能中。这方面的最佳做法是什么？
2. 整个 config 函数是否会在函数中的单个属性更改时进行评估，还是可以识别更改并更新所需的内容？
3. 根据文档，reactive 具有很强的反应性并用于对象，但是，我注意到它不会更新到属性更改。因此，我在 Vue 2 中的处理方式更像是 data。是我遗漏了什么还是这是正确的处理方式？

Answer 1

1. 您根本不必用computed 包装道具，因为它们是should be already reactive and immutable。

   你也不必从你的设置函数中返回config，因为传递给你的组件的所有道具都应该自动暴露给你的模板。

2. computed 函数只被评估一次，然后 Vue3 使用 Proxy 来观察值的变化并只更新需要的内容。如果您需要在每次属性更改时运行一个函数，您可以使用watchEffect。

3. Vue3 reactive 实际上很深并且在对象上工作得很好。它应该跟踪所有更改，除非您尝试更改原始对象（reactive 函数的目标）。