Vue 3 在 setup() 中渲染 vnodes 数组

【问题标题】：Vue 3 Rendering array array of vnodes in setup()Vue 3 在 setup() 中渲染 vnodes 数组
【发布时间】：2021-09-16 15:44:47
【问题描述】：

我正在查看设置函数以呈现一组按钮。为简单起见，我在下面提供了这个示例。

当我使用数组并将值推送或分配为默认值时，然后将数组放在渲染函数中，我在点击时看不到任何反应。

setup(props, {emit, slots}) {
    const base_number = ref(1)

    const base_offset= computed(()=> { return base.value + 2 })
    let buttons = [base_offset.value]

    let pageClick =  (event , pageNumber ) => {
       base_number.value = 3
    }

    return  h("ul",{ class: "pagination", 'onClick' : event => { pageClick(event, 1)}},
               buttons
            )

但是，当我将这样的组件数组放在 return 中时，反应性和值更新工作。

   //On click will update  base_offset
    return  h("ul",{ class: "pagination", 'onClick' : event => { pageClick(event, 1)}},
                      [base_offset.value]
             )

}

我遗漏了什么，是否可以传入一个 vnode 数组？

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

与其直接从setup() 返回VNode 数组，不如返回一个render 函数，该函数返回一个VNode 数组（您应该会看到关于此的浏览器控制台警告）：

export default {
  setup() {
    // return h(...) ❌
    return () => h(...) ✅
  }
}

在该渲染函数中，创建VNodes 的buttons 数组。请注意，在渲染函数之外创建的VNodes 不是响应式的。

export default {
  setup() {
    //...

    // ❌ non-reactive buttons array
    // let buttons = [base_offset.value, base_offset.value + 2, base_offset.value + 4]

    return () => {
      // ✅ reactive buttons array
      let buttons = [base_offset.value, base_offset.value + 2, base_offset.value + 4]

      return h(
        'ul',
        {
          class: 'pagination',
          onClick: (event) => {
            pageClick(event, 1)
          },
        },
        buttons
      )
    }
  }
}

demo

【讨论】：