API

createApp

创建应用。

第一个参数为根组件，必传。第二个参数为用于挂载根组件。接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串。

function App() {
  return <h1>Hello</h1>;
}

createApp(<App />, '#app');

signal

以给定参数为初始值创建一个新的信号。

$signal 是 Mettle 提供的编译期语法糖，用于更自然地编写响应式状态。 你写的是“普通变量赋值/自增”，编译后会自动转换为 signal 的 .value 读写。

function App() {
  let count = $signal(0);

  function add() {
    count++;
  }

  return (
    <>
      <button onClick={add}>add</button>
      <p>{count}</p>
    </>
  );
}

computed

创建一个根据其他信号的值计算的新信号。返回的计算信号是只读的，当回调函数内访问的任何信号发生变化时，其值会自动更新。

function App() {
  let count = $signal(0);
  const double = computed(() => count * 2);

  function add() {
    count++;
  }

  return (
    <>
      <button onClick={add}>add</button>
      <p>{count}</p>
      <p>{double}</p>
    </>
  );
}

effect

要根据信号变化运行任意代码，可以使用effect(fn)。与computed类似，effect 会跟踪哪些信号被访问，并在这些信号发生变化时重新运行其回调。与computed不同的是，effect()不返回信号。

function App() {
  let name = $signal('Hello');

  effect(() => console.log('Hello', name)); // Hello -> hello111

  function change() {
    name = 'hello111';
  }

  return (
    <>
      <button onClick={change}>change</button>
      <p>{name}</p>
    </>
  );
}

batch

batch(fn)函数可用于在提供的回调结束时将多个值更新合并为一个“提交”。

function App() {
  let name = $signal('hello');
  let surname = $signal('dog');

  function change() {
    batch(() => {
      name = 'Hello';
      surname = 'cat';
    });
  }

  return (
    <>
      <button onClick={change}>change</button>
      <p>{name}</p>
      <p>{surname}</p>
    </>
  );
}

untracked

untracked(fn)可用于访问多个信号的值而无需订阅它们。

function App() {
  let name = $signal('hello');
  let surname = $signal('dog');

  effect(() => {
    untracked(() => {
      console.log(`${name} ${surname}`);
    });
  });

  function change() {
    surname = 'cat';
  }

  return (
    <>
      <button onClick={change}>change</button>
      <p>{name}</p>
      <p>{surname}</p>
    </>
  );
}

onMounted

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

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

  return <h1>About</h1>
}

onUnmounted

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

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

  return <h1>About</h1>
}

domInfo

获取 DOM 信息。

function App() {
  const h1 = {};

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

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

resetView

集成mettleRouter，用于重置当前路由视图。

html

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

WARNING

此 API 仅在无构建版本下使用。

function App() {
  const count = 0;
  return () => html`<p>${count}</p>`;
}

TIP

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