Question

与onMount不同，SvelteJS中没有beforeMount生命周期事件。那么，如何在挂载之前获取页面依赖的数据？ onMount提取会产生故障。可以说，如果条件允许，我可以在其中包装依赖的DOM。但是我认为这不是正确的解决方案。就像在Sapper中一样，有一个preload函数可以在挂载之前加载与页面相关的数据。在SvelteJS中，这种行为（Sapper preload）的替代方法是什么？

Answer 1

您将创建另一个在数据准备就绪之前不会呈现该组件的组件。

<script>
import Post from "./Post.svelte";

const url = 'https://jsonplaceholder.typicode.com/posts/1';
const promise = fetch(url).then(response => response.json());
</script>

{#await promise then data}
    <Post title={data.title} />
{/await}

REPL

根据情况，您可以使用支持数据加载的路由器，例如，sapper路由器。

Answer 2

您可以将fetch代码放在<script>标签下

<script>块包含在创建组件实例时运行的JavaScript。

还有带有context="module"标签的<script>属性。

在模块第一次评估时运行一次，而不是针对每个组件实例运行

请参见the official docs

Answer 3

Noob在这里，对您的子问题：仅不是苗条的前端？这意味着不支持SSR，因此没有选项可以通过第一个用户请求预加载数据。

因此，您没有任何服务器可以预加载数据并为用户提供数据的预打包前端（平滑页面）。因此，您需要Sapper提供一种功能，使服务器可以根据第一个用户请求获取数据，填充前端并将其发送给用户。通过这种方式，用户在收到服务器的第一响应时会收到填充有数据的苗条页面。 >

由于仅使用svelte，因此用户需要更频繁地与您的服务器联系。首先，它获取前端，然后前端从后端获取数据。此外，它不会对SEO友好，因为机器人不会等待后续的服务器响应。因此，您的页面将无法正确分析，因为机器人会分析“空白”页面，尚未装载任何数据，然后移至下一页，然后再处理响应。

请纠正我，如果我错了;）

我相信以上答案是正确的： 1.在脚本标签中创建空变量 2.添加下面的onMount调用并将数据从服务器获取到声明的变量之上 3.检查var是否为空并显示加载按钮 4.如果var不为空，则显示用户内容 6.利润？

P.S：对任何误解或英语不好表示抱歉：）

在Svelte中安装组件之前如何获取数据？

3 个答案: