Nuxt中的数据VS异步数据

Question

我使用的是 vue.js 与 nuxt.js，我只是还在困惑什么时候使用数据VS异步数据。我只是有数据，只是在页面上显示，为什么要使用Async数据？

我有一个FAQ的数据对象，只想显示数据而不做任何操作。使用asyncData的好处是什么？或者说在什么情况下使用它们最好？

如果在我的组件内部使用这样的数据，我是否应该默认显示这样的列表数据为async？

列表数据

 data:() => ({
   faqs:[
     {"title":"faq1"},
     {"title":"faq2"},
     {"title":"faq3"},
    ]
 }),

asyncData

asyncData(context) {
        return new Promise((resolve, reject) => {
            resolve({
                colocationFaqs:[
                    {"title":"faq1"},
                    {"title":"faq2"},
                    {"title":"faq3"},
                ]
            });
        })
        .then(data => {
            return data
        })
        .catch(e => {
            context.error(e);
        });
    },

Answer 1

asyncData 发生在server端。你不能访问浏览器的东西，比如 localStorage 或 fetch() 例如，但另一方面，你可以访问服务器端的东西。

那么为什么你要使用 asyncData 而不是像vue循环 created?

使用的好处 asyncData 是SEO和速度。有这样一个特殊的 context 参数。它包含了诸如你的 store 与 context.store. 它的特别之处在于 asyncData 发生在服务器端，但商店通常是在客户端。这意味着你可以得到一些数据，然后用它填充你的商店和其他地方你显示它。这样做的好处是，它的所有服务器端，增加你的SEO，所以例如，谷歌爬虫不会看到一个空白的页面。

既然要显示，为什么还要预先渲染呢？

是的，对我们来说，它并不重要，如果我发送1个文件到客户端，它渲染所有的数据，如在SPA的或如果它的预渲染。但它并不重要的谷歌爬虫。如果你使用SPA模式的爬虫只是看到一个空白页。你也可以发现它。转到任何SPA网站，点击右键并检查你会看到，那里只有1个Div标签和几个 <script> 标签。(不要按F12键，像这样检查，那不是我的意思)。