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

Question

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

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

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 数组？

Answer 1

而不是直接从 setup() 中 returning VNode 数组，它应该 return 一个 render 函数 returns 一个 VNode 数组（你应该会看到一个关于此的浏览器控制台警告）：

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

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

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

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

Vue 3 Rendering array array of vnodes in setup()

vue.js

vuejs3

vue-composition-api