nuxt 原创系列之asyncData浅析

本文摘要

来自摩拜前端团队的 bing

本文主要关注Nuxt.js中asyncData的源码实现及执行前后的相关内容。

欢迎留言并分享Nuxt.js在使用中体会,还可以关注我司yingye大神的[Nuxt.js]踩坑系列文章,了解更多关于Nuxt.js的使用心得。

Nuxt.js是vue官方推荐的一款优秀的服务端渲染(ssr)项目,集成了Vue,Vue-Router,Vuex,Vue-Meta等组件/框架,内置了webpack用于自动化构建,使我们可以更快速地搭建一个具有服务端渲染能力的应用。

今天主要来了解下Nuxt.js中一个非常重要的拓展功能:

asyncData(异步数据)的实现

1、asyncData有什么用?

在日常需求中可能想要在服务器端获取并渲染数据。那么使用asyncData方法可以使得你能够在渲染组件之前异步获取数据。asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。

在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用asyncData方法来获取数据并返回给当前组件。

2、为了更好的理解,首先先了解下ssr原理

如上图所示:webpack将 Source 打包出两个bundle文件:

其中 Server Bundle用于服务端渲染,服务端通过渲染器 bundleRenderer 将 bundle 生成首屏html片段;

而 Client Bundle 用于客户端渲染,首屏外的交互和数据处理还是需要浏览器执行 Client Bundle 来完成

我们的主角asyncData()就是在上图中Node Server中处理

3、创建渲染器

我们直接从打包之后说起,Nuxt renderer使用vue-server-renderer插件创建渲染器并解析webpack打好的bundle文件

4 、渲染器调用自身方法返回拼装好的组件html

会在传入包含请求信息的上下文,方法内读取server-bundle.json构建清单(其实它是由我们自定义的一个server.js生成,这里面写着如何去提前取数据),并将上下文环境传入,该文件返回一个新的vue实例,方法会根据返回的vue实例生成一段拼装好数据的html片段

4.1、server.js做了哪些事情

server.js做了如下图红框中这些事情

每个用户通过浏览器访问Vue页面时,都是一个全新的上下文,但在服务端,应用启动后就一直运行着,处理每个用户请求的都是在同一个应用上下文中。为了不串数据,需要为每次SSR请求,创建全新的app, store, router。

我们主要关注最后一部分asyncData部分

首先会根据上下文环境中的url调用 将匹配的component返回

接着遍历每个component,根据component的asyncData配置,执行 promisify()来promise化asyncData方法并将上下文对象赋给asyncData方法

promisify()方法接受两个参数:第一个组件中配置的asyncData()方法;第二个是挂载到新vue实例上的上下文对象

执行后通过方法将得到的数据同步一份给页面中定义的data,asyncData只是在首屏的时候调用一次,后续交互还是交给client处理

5、拼装完整html并return

server.js会将新创建的Vue实例返回,会根据实例内容创建好一段已经拼装好的代码片段

最后就是调用ssrTemplate将一些layout的模板拼装好返回整个页面的html

文章最后

大家是否对服务端渲染以及asyncData的原理有了一定的认识呢,文中有任何表述不清或不当的地方,欢迎大家批评指正。

前端圈--打造专业的前端技术会议

为web前端开发者提供技术分享和交流的平台

打造一个良好的前端圈生态,推动web标准化的发展

官网:http://fequan.com

微博:fequancom|QQ群:41378087

赞助合作:apply@fequan.com

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180524B1DC6M00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券