Vue 中的反应式函数

Question

我一直在试图理解在 Vue 中使用函数时如何获得反应值。

我有一个这样的简单案例：

 <v-simple-checkbox :value="isSelected(item)" @input="toggleSelect(item)" />

isSelected 和 toggleSelect 是方法（或者更确切地说是通过 Vue Composition API 公开的函数）。

它们是这样定义的：

  let selection = {};

  function toggleSelect(item) {       
    selection[item.id] = !selection[item.id]
  }

  function isSelected(item) {
    return !!selection[item.id];
  }

  return {
     isSelected,
     toggleSelect,
     other exposed things...
  }

单击复选框时，我看到所有状态都已更新。 但是因为:value 绑定到一个函数。它不会触发视图的更新。

这基本上是“用参数计算”的问题，我没有找到任何真正的答案。

我试过$forceUpdate，但也没有运气。

Answer 1

但是当:value 绑定到一个函数时，它不会触发视图的更新。

这根本不是真的。无论您是绑定到内联 JS 表达式（如 :value="!!selection[item.id]"）还是绑定到与示例中相同的表达式返回结果的函数，都没有关系。 Vue 只执行渲染函数（从模板编译）并监控所有反应数据。如果在渲染过程中使用了一些响应式数据，Vue 知道将来每当这些数据发生变化时，它都应该运行重新渲染。并且数据是被简单的表达式或调用函数或调用多个嵌套函数“触及”都没有关系。一点都不重要。 重要的是您的数据是否具有反应性

要使selection 具有反应性，您必须创建它并像这样使用它：

const state = reactive({
  selection: {}
})

function toggleSelect(item) {       
    state.selection[item.id] = !state.selection[item.id]
  }

  function isSelected(item) {
    return !!state.selection[item.id];
  }

别忘了import { reactive } from '@vue/composition-api'

更新

我假设您正在使用this package 进行实验。它是新的组合 API，但在 Vue 2 之上实现。因此，它具有相同的 Change Detection Caveats。这种情况下的问题是向空对象selection 添加新属性。添加初始值后，代码按预期工作......

const state = reactive({
      selection: {
        1: false,
        2: true
      }
    });

Working demo

在 Vue 3 中不需要这样做，因为它将使用代理进行更改检测...