$ 边界

规则

• 只有可序列化的数据才能跨越 $ 边界。

Serialization Boundary

每当您 跨越（转换为延迟加载形式的）函数的词法作用域 时，就会出现序列化边界。 它总是用 $(...) （或 ____$(...)）表示， 看例子：

import { component$ } from '@builder.io/qwik';

export const topLevel = Promise.resolve('nonserializable data');

export const Greeter = component$(() => {
  // BEGIN component serialization boundary

  // 始终允许引用导出的top level symbols。
  console.log(topLevel); // OK

  const captureSerializable = 'serializable data';
  const captureNonSerializable = Promise.resolve('nonserializable data');

  return (
    <button
      onClick$={() => {
        // BEGIN onClick serialization boundary

        // 始终允许引用导出的top level symbols。
        // 即使值是不可序列化的。
        console.log(topLevel); // OK

        // Capturing a non-top-level variable is allowed only if:
        // - declared as `const`
        // - is serializable (runtime error)
        console.log(captureSerializable); // OK

        // Referring to captureNonSerializable will pass static analysis but
        // will fail at runtime because Qwik does not know how to serialize it.
        console.log(captureNonSerializable); // RUNTIME ERROR

        // END onClick serialization boundary
      }}
    >
      click
    </button>
  );
  // END component serialization boundary
});