fragment(attrs, children)

描述

允许将生命周期方法附加到 vnode 片段。

javascript

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 }, [
        // 包含两个元素的片段
        m('li', 'child 3'),
        m('li', 'child 4'),
      ])
    : null,
]);

签名

生成一个片段 vnode

vnode = m.fragment(attrs, children)

参数	类型	必需	描述
`attrs`	`Object`	否	HTML 属性或元素属性
`children`	`Array<Vnode>\|String\|Number\|Boolean`	否	子 vnode。可作为展开参数的形式
返回	`Vnode`		一个片段 vnode

如何阅读签名

工作原理

m.fragment() 创建一个带有属性的片段 vnode。它适用于涉及 keys 或生命周期方法的高级使用场景。

片段 vnode 代表一组 DOM 元素。如果你只需要一个表示单个 DOM 元素的常规元素 vnode，并且不需要键控逻辑，则应该使用 m()。

通常，你可以使用简单的数组或展开语法来表示节点列表：

javascript

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 或生命周期方法，但有时不希望引入额外的元素（例如，在复杂的表格结构中）。在这种情况下，可以使用片段 vnode。

使用 m.fragment 而不是手动编写 vnode 对象结构有几个好处：m.fragment 创建的单态对象在性能上优于动态创建的对象。此外，使用 m.fragment 可以更清晰地表达你的意图，方便其他开发者理解，并且可以降低你错误地将属性设置在 vnode 对象本身而不是其 attrs 映射上的可能性。

fragment(attrs, children) ​

描述 ​

签名 ​

工作原理 ​

fragment(attrs, children)

描述

签名

工作原理