详解基于vue的服务端渲染框架NUXT

data

方法返回的数据一并返回给当前组件。这个方法只能用在页面组件中，在

componets

下在公共组件是不能调用该方法的，

Nuxt

不会扩展增强该目录下

Vue

组件。

因为

asyncData

方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过

this

来引用组件的实例对象。

async asyncData ({ params, error }) {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
  return {
   users: data.slice(0,5)
  }
 },

上面demo中asyncData返回的数据赋值给了users，这样我就可以在页面中像使用data里的数据一样去使用users，例如我在template下循环出users

<ul>
  <li v-for="item in users" :key="item.name">{{item.name}}</li>
 </ul>

我现在去查看源代码，发现页面中li中的数据已经渲染过来了，也就是达到了服务端渲染。

附一张Nuxt渲染的流程图：

总结

整体感觉Nuxt还是很好上手的，利用脚手架，看看官方文档，写写demo，大致就能了解整个流程。但其中的具体实现细节，还需要去认真看看 https://ssr.vuejs.org/zh/