Реактивные функции в Vue

Question

Я застрял, пытаясь понять, как я могу получить реактивные значения при использовании функций в Vue.

У меня есть простой случай, подобный так:

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

isSelected и toggleSelect являются методами (или, скорее, функциями, предоставляемыми через API Vue Composition).

они определены следующим образом:

  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'

Обновление

Я предполагаю, что вы используете этот пакет для своих экспериментов. Это новый составной API, но реализованный поверх Vue 2. Из-за этого он имеет Предупреждения об обнаружении изменений . Проблема в этом случае заключается в добавлении новых свойств в пустой объект selection. После добавления начальных значений код работает должным образом ....

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

Рабочая демонстрация

В Vue 3 это не понадобится, так как он будет использовать проксидля обнаружения изменений ...