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中将不再需要它，因为它将使用代理进行更改检测...

Vue中的反应性功能

1 个答案:

更新