使用VueJS在页面加载上渲染长列表

时间:2017-11-18 07:04:47

标签: ajax vue.js

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

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

虽然这是可行的,但我不愿意引入第二个请求,除非我真的必须这样做。有没有更简单的方法来解决这个问题?我错过了VueJS的工作方式吗?如果可能的话,我真的想在服务器端渲染初始列表。例如,以某种方式将初始列表包含为' transcluded'是否可行。内容?

我不想进入VueJS&#39;完整的服务器端渲染,因为它看起来像一个高级主题(这是一个简单的任务)。我已尝试将初始列表数据作为JSON传递到页面的<head>中(将其注册为javascript变量的内部标记),但这似乎是一个黑客/解决方法。

1 个答案:

答案 0 :(得分:1)

  

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

是的,这是最直接的方式,也被视为反模式。只是出于下一句话的原因:&#34;虽然这是可行的,但我犹豫是否要介绍第二个请求&#34; ...

我想你应该先在medium.com上阅读以下帖子。它是关于Vue和Laravel框架的,但是这里的原则可以被认为是普遍的:

https://medium.com/js-dojo/avoid-this-common-anti-pattern-in-full-stack-vue-laravel-apps-bd9f584a724f