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