x-cloak

有时，当你在模板的一部分中使用 AlpineJS 时，在页面加载后、Alpine 加载前，可能会看到一个"闪白"——即未初始化的模板内容闪现出来。

x-cloak 就是用来解决这个问题的，它会隐藏应用了该属性的元素，直到 Alpine 在页面上完全加载完成。

不过，要让 x-cloak 生效，你需要在页面中添加以下 CSS。

[x-cloak] { display: none !important; }

下面的示例会隐藏 <span> 标签，直到其 x-show 明确设置为 true，从而防止 Alpine 加载过程中隐藏元素闪现到屏幕上。

<span x-cloak x-show="false">This will not 'blip' onto screen at any point</span>

x-cloak 不仅适用于 x-show 或 x-if 隐藏的元素：它还能确保包含数据的元素在数据正确设置之前也被隐藏。下面的示例会隐藏 <span> 标签，直到 Alpine 将其文本内容设置为 message 属性。

<span x-cloak x-text="message"></span>

当 Alpine 在页面上加载时，它会从元素上移除所有 x-cloak 属性，从而也移除了 CSS 应用的 display: none;，因此元素会显示出来。

全局语法的替代方案

如果你想达到同样的效果，但不想引入全局样式，可以使用下面这个巧妙（虽然确实有点奇怪）的技巧：

<template x-if="true">
    <span x-text="message"></span>
</template>

这会通过利用 x-if 的工作原理，达到与 x-cloak 相同的效果。

因为 <template> 元素在浏览器中默认是"隐藏"的，所以直到 Alpine 有机会渲染 x-if="true" 并显示出 <span> 之前，你都不会看到它。

同样，这个方案并不适合所有人，但特殊情况下值得一提。