可以在 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)
参数 | 类型 | 是否必须 | 描述 |
---|---|---|---|
attrs |
Object |
是 | 属性映射 |
children |
Array |
是 | vnode 数组 |
返回 | Vnode |
vnode 片段 |
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
会创建单态对象,这会比动态创建对象有更好的性能。