1

我一直试图了解在 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...
  }

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

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

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

4

1 回答 1

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'

更新

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

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

工作演示

在 Vue 3 中，这将不是必需的，因为它将使用代理进行更改检测......

于 2019-12-23T08:44:43.093 回答