Vue.js 非渐进式渲染答案

【问题标题】：Vue.js non-progressive renderingVue.js 非渐进式渲染
【发布时间】：2020-02-11 15:29:36
【问题描述】：

我使用 Vue SPA 已经有一段时间了，我不喜欢的一件事是页面是如何逐步呈现的——这意味着元素在页面加载时呈现，从而导致用户体验不稳定。即使使用 Nuxt SSR - 页面也不会完整地呈现给用户，而是会出现断断续续的视觉加载。

当我将我的应用转移到生产环境时，这个问题会最小化吗？（它是“开发”的东西吗？）除了以下技术之外，还有什么方法可以防止这种情况发生？

【问题讨论】：

标签： vue.js

【解决方案1】：

如果你从这样的创建函数中加载数据

created(){
        axios.get('/api/user').then(response=>{
            this.user = response.data
        })

    },

你只需要声明一个加载数据

data: () => ({
loading:true,
user:null
})

然后在你的模板上


<v-overlay :value="loading">
  <v-progress-circular indeterminate size="64" color="yellow"></v-progress-circular>
</v-overlay>

loading的初始值为true，表示会渲染叠加层当网站加载时，您只需在获取数据后将值加载设置为 false，只需添加：

created(){
        axios.get('/api/user').then(response=>{
            this.user = response.data
            this.loading = false
        })

    },

由于加载数据几乎将用于所有路线，我建议您使用vuex作为加载数据，以便可以在所有组件中使用。

如果你没有加载任何数据，你可以查看 vuejs lifecycle

【讨论】：