在所有vue的生命周期钩子函数中,beforeCreate 和 created 会在服务端渲染的时候被调用,其它生命周期会在客户端执行。
所以我们在 beforeCreate 和 created 这2个生命周期内不能访问this,也不能访问window,更不能访问组件实例等。
服务端渲染,顾名思义,项目运行在服务端 当客户端请求的时候就已经是服务端渲染好了,方便seo。
axios:
我们发送http请求的库推荐使用axios。又因为axios不仅会用在客户端发送http请求,还会用在服务端发送http请求,所以在给axios设置拦截器的时候需要小心使用和window或者dom相关的方法。
缓存:
nuxt 进行服务端渲染
利用nuxt的生命周期中的 异步数据层 asyncData 和 fetch 都是服务层的 render
...
<li v-for="(item,idx) in list" :key="idx">{{item}}</li>
...
...
export default {
layout: 'search',
data() {
return {
list: []
}
},
async asyncData(){
let { status, data: {list}} = await axios.get('http://localhost:3000/city/list')
if(status === 200){
return {
list
}
}
}
}
然后右键查看源码就可以看到渲染了
标签: ssr前端frontH5部分