API

TIP

为了更好的阅读体验，下面的代码示例，除了html API 使用标签模版编写， 其他都使用 JSX 语法编写。

defineComponent

定义组件。

第一个参数为配置对象，可传。其配置属性为mount, 该配置属性用于挂载根组件。接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串。

第二个参数为函数，必传。返回 HTML 模版。函数的参数为一个对象，对象的属性分别为content、setData。

defineComponent(
  {
    mount: '#app',
  },
  () => {
    return () => (
      <div>
        <h1>Hello Mettle</h1>
      </div>
    );
  }
);

其中，我们可以利用content给组件定义数据，并且在你需要的时候使用它。

const app = defineComponent(({ setData, content }) => {
  content.data = {
    name: 'Mettle',
  };

  return () => (
    <div>
      <h1>Hello Mettle</h1>
    </div>
  );
});

console.log(app.data); // {name:'Mettle'}

setData

修改页面数据。

第一个参数为函数，必传。执行回调函数，进而修改关联的页面数据。 第二个参数为上下文环境，在外部作用域必传，在内部作用域不传。

内部作用域：

defineComponent(({ setData }) => {
  let count = 0;

  function add() {
    setData(() => {
      count++;
    });
  }

  return () => (
    <fragment>
      <button onClick={add}>Add</button>
      <h1>{count}</h1>
    </fragment>
  );
});

外部作用域：

import { defineComponent, setData } from 'mettle';

let count = 0;

const app = defineComponent(() => {
  return () => (
    <fragment>
      <button onClick={add}>Add</button>
      <h1>{count}</h1>
    </fragment>
  );
});

function add() {
  setData(() => {
    count++;
  }, app);
}

html

html``是一个标签函数，标签函数的语法是直接在函数名后跟一个模板字符串。 例如，你可以直接在模板字符串中编写 HTML 标签。

在 JSX 语法环境下，不会用到此 API。

defineComponent(() => {
  let count = 0;

  return () => html`<p>${count}</p>`;
});

TIP

如果你使用的是 VSCode 编辑器，你可以去商店下载 es6-string-html 插件， 这个插件可以使 HTML 模板字符串高亮显示。

onMounted

注册一个回调函数，在组件挂载完成后执行。

defineComponent(() => {
  onMounted(() => {
    console.log('onMounted', 'about');
  });

  return () => (
    <fragment>
      <h1>About</h1>
    </fragment>
  );
});

onUnmounted

注册一个回调函数，在组件实例被卸载之后调用。

defineComponent(() => {
  onUnmounted(() => {
    console.log('onUnmounted', 'about');
  });

  return () => (
    <fragment>
      <h1>About</h1>
    </fragment>
  );
});

domInfo

获取 DOM 信息。

defineComponent(() => {
  const h1 = ref();

  function getDomInfo() {
    console.log('domInfo', domInfo.get(h1));
  }

  return () => (
    <fragment>
      <h1 $ref={h1} onClick={getDomInfo}>
        Hello
      </h1>
    </fragment>
  );
});