美文网首页
vue问题辑录-页面初始化ajax

vue问题辑录-页面初始化ajax

作者: 切磋琢磨_FE | 来源:发表于2017-08-14 15:47 被阅读0次

vue 有8个声明周期,如果在vue实例创建之前需要获取页面初始数据。
此时要进行ajax请求,应该是同步还是异步好?

beforeCreate:function(){
    // getInitData ajax请求获取数据
}

我想着应该异步,那么如果异步请求,页面会在还没有返回数据的时候进行渲染。
此时可以使用loading动画遮盖。

但是返回的数据该如何写入到已有的数据中?
比如:

替换了整个对象,会不会对数据渲染造成影响?

vm 还没有实例化,能不能在vm实例化之前访问vm


function getInitData(){
    // ... 这里获取上数据
    var data = getedData;
    vm.$data.initData = data;
    // 1. 这样替换了整个对象,会不会对数据渲染造成影响?
    // 2. vm 还没有实例化,能不能在此处访问?
}
var vm = new Vue({
    el:'#app',
    data:{
        initData:{
            name:'name',
            age:'age',
            bulabual:'bulaubla',
        }
    },
    beforeCreate:function(){
        getInitData()
    }
})

在浏览器console中替换对象测试,好像没有影响

经浏览器测试,在vm未实例化之前访问无法访问其vm.$data

那么上面的代码无法正确执行,鉴于此只好将初始化的ajax请求放入到beforeCreate中。

如果使用异步请求,还是需要loading动画遮盖无数据的界面。
那么如果使用同步请求,未请求完成时页面无法进行渲染,依然需要laoding动画遮盖。

综上

需要页面初始化获取数据的必须需要loading动画。

异步初始化情况下可以同时渲染vue实例,在获取数据后再修改数据。

而同步初始化情况下,是在数据获取之后再渲染vue实例。

两者各有取舍。

相关文章

  • vue问题辑录-页面初始化ajax

    vue 有8个声明周期,如果在vue实例创建之前需要获取页面初始数据。此时要进行ajax请求,应该是同步还是异步好...

  • Vue常见问题总结

    1.vue 初始化页面闪动问题 使用 vue 开发时,在 vue 初始化之前,由于 div 是不归 vue 管的,...

  • axious

    axios: vue ajax 前端页面和后台数据进行交互 json vue 库

  • 2018-09-26

    axios axios: vue中的ajax(ajax:前端页面和后台数据做交互) axios的应用

  • axios

    axios vue的 ajax(前端页面和后台数据做交互)。

  • Vue $nextTick使用

    遇到问题 在vue页面中使用elementUI的弹出层 在页面初始化时加载的JsBarcode 条形码没有出现 然...

  • axios

    vue ajax 前端页面和后台数据进行交互 json下载:npm install axios访问页面:网址...

  • october页面ajax操作

    october处理页面上ajax请求或提交数据处理 初始化 在页面,布局、或者partials中页面增加jquer...

  • Vue知识点

    Vue起步 Axios:ajax数据的获取。Vue Router:多页面之间的路由。Vuex:各个组件之间的数据共...

  • axios

    它是vue中的ajax版本:1.0:vue-resource2.0:axios 库作用:前段页面和后台数据做...

网友评论

      本文标题:vue问题辑录-页面初始化ajax

      本文链接:https://www.haomeiwen.com/subject/sbmurxtx.html