Vue 组合 api - 组件在开始时不使用 reactive() 呈现

Question

刚开始使用 Vue 组合-api（使用 Vue2）并且我运行有一些反应？问题。

在模板中，我想根据所选日期呈现元素列表。

我的模板：

...
<div v-for="(act, idx) in elementsPerDay[dateMatchable]" :key="idx">
   ...some content...
</div>
...

现在的问题是，当创建组件并获取数据时，没有呈现任何内容并且 elementsPerDay 为空（在模板中）。一旦我强制更新模板（例如通过调用 vm.$forceUpdate()）一切正常。

我的设置：

...
const selectedDate = new Date()
const { data } = <async function to get data>
const dateMatchable = computed(() => formatDate(selectedDate, 'YYYY-MM-DD')) // returns selectedDate as YYYY-MM-DD

// Here I init my reactive object
const elementsPerDay = reactive({})

// Here I fill my elementsPerDay when data changes (basically grouping data by day)
watch(data, e => {
  const elsPerDay = {}

  for (let idx = 0; idx < data.length; idx++) {
    const element = data[idx]
    const elementDate = formatDate(data.datetime, 'YYYY-MM-DD')

    if (elementsPerDay[elementDate] === undefined) {
      elsPerDay[elementDate] = []
    }

    elsPerDay[elementDate].push(act)
  })
  
  // Assign data to my reactive object
  Object.assign(elementsPerDay, elsPerDay)
})
...

return { ..., selectedDate, dateMatchable, elementsPerDay }

编辑：

使用计算作品：

    const elementsPerDay = computed(() => {
      if (!data.value) {
        return {}
      }

      const elsPerDay = {}
      for (let idx = 0; idx < data.value.length; idx++) {
        const element = data.value[idx]
        const elementDate = formatDate(element.datetime, 'YYYY-MM-DD')

        if (elsPerDay[elementDate] === undefined) {
          elsPerDay[elementDate] = []
        }

        elsPerDay[elementDate].push(element)
      }

      return elsPerDay
    })

我意识到在选项 API 中，您需要 $set() 对象中的新字段才能使其具有反应性，但我认为 reactive() 以某种方式为我做了这个。我错了吗？

Answer 1

Compoisition API 插件不是 Vue 3。实际上，您遇到的是 Vue 2 的限制：https://vuejs.org/v2/guide/reactivity.html#For-Objects.

您需要使用$set。

我在 Github 上发现了与您的问题相关的问题：https://github.com/vuejs/composition-api/issues/334。

Answer 2

如果您正在使用 https://github.com/vuejs/composition-api，您可以通过以下方式使用 $set()：

import { set } from '@vue/composition-api'
...

setup() {
  set(object, 'key', 'value');
}

Vue 组合 api - 组件在开始时不使用 reactive() 呈现

Vue composition api - component doesnt render at start using reactive()

vue.js

vue-composition-api