fragment(attrs, children)

描述

可以在 vnode 片段上添加生命周期方法

var groupVisible = true
var log = function() {
    console.log("group is now visible")
}

m("ul", [
    m("li", "child 1"),
    m("li", "child 2"),
    groupVisible ? m.fragment({oninit: log}, [
// a fragment containing two elements
m("li", "child 3"),
m("li", "child 4"),
    ]) : null
])

签名

生成一个 vnode 片段

vnode = m.fragment(attrs, children)

工作原理

m.fragment() 创建一个带属性的 vnode 片段。用于涉及 key 或 生命周期方法的高级用法的场合。

vnode 片段表示 DOM 元素列表。如果你想要只代表一个 DOM 元素的常规 vnode，应该使用 m()。

通常，可以使用简单的数组表示节点列表：

var groupVisible = true

m("ul", [
    m("li", "child 1"),
    m("li", "child 2"),
    groupVisible ? [
// 这个片段包含两个元素
m("li", "child 3"),
m("li", "child 4"),
    ] : null
])

但是，JavaScript 数组不能添加 key 或生命周期方法。有个方式是创建一个在数组外包裹一个元素来添加 key 和生命周期方法，但有时添加一个额外的元素是不可取的（例如在复杂的表格结构中），这种情况下，可以使用 vnode 片段。

使用 m.fragment 来代替手写 vnode 对象结构有几个好处：m.fragment 会创建单态对象，这会比动态创建对象有更好的性能。