使用 VueJS 在页面加载时呈现长列表答案

【问题标题】：Render a long list on page load with VueJS使用 VueJS 在页面加载时呈现长列表
【发布时间】：2017-11-18 07:04:47
【问题描述】：

我有一个很长的列表，我想让用户在基于浏览器的 Web 应用程序中进行操作。使用 jQuery，最直接的方法是将其作为初始页面加载的一部分在服务器上呈现，并包含一个为 AJAX 请求和 DOM 操作注册事件处理程序的小脚本。

然而，在 VueJs 的情况下，在我看来，最直接的方法是初始请求仅加载页面布局，然后调用 API 来获取长列表的数据。换句话说，VueJs 呈现的是初始列表，而不是服务器。

虽然这是可行的，但除非我真的必须这样做，否则我会犹豫是否要引入第二个请求。有没有更直接的方法来解决这个问题？我是否遗漏了有关 VueJS 工作原理的一些信息？如果可能的话，我真的很想在服务器端呈现初始列表。例如，以某种方式将初始列表包含为“嵌入”内容是否可行？

我不想深入了解 VueJS 的完整服务器端渲染，因为它看起来像是一个高级主题（而且这是一项简单的任务）。我已经尝试在页面的<head> 中将初始列表数据作为 JSON 传递（在将其注册为 javascript 变量的标签内），但这似乎是一种破解/解决方法。

【问题讨论】：

标签： ajax vue.js

【解决方案1】：

然而，在 VueJs 的情况下，在我看来，最直接的方法是初始请求仅加载页面布局，然后调用 API 来获取长列表的数据。换句话说，VueJs 呈现的是初始列表，而不是服务器。

是的，这是最直接的方式，也被认为是反模式。只是因为您下一句中的原因：“虽然这是可行的，但我很犹豫是否要介绍第二个请求”......

我认为您应该先阅读 medium.com 上的以下帖子。它是关于 Vue 和 Laravel 框架的，但这里的原则可以认为是通用的：

【讨论】：