nuxt 之asyncData浅析

摘要:

*asyncData方法可以使得你能够在渲染组件之前异步获取数据。asyncData方法会在组件(限于页面组件)每次加载之前被调用

解析

:传统axio是页面静态html,css加载好了之后再去发送请求,获取数据来动态渲染,这样源代码*只有一开始加载的一点内容,不利于爬虫抓取
asyncData可以在页面渲染之前去获取请求数据,再渲染页面,这样子页面源代码就包含所有渲染的数据,利于seo

原理分析:

https://cloud.tencent.com/developer/news/221008(转载)

说明:

  • nuxt使用了node的服务器 node server ,

  • asyncData只是在首屏的时候调用一次(即页面渲染之前,所以事件触发不了它)

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

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

  • 页面的V-for是重复渲染,所以必须加:key,参考前一篇文章

你可能感兴趣的:(nuxt 之asyncData浅析)