Vue---created()使用的注意事项--执行顺序

什么时候使用created()

vue框架中通常在created钩子函数里执行访问数据库的方法,然后返回数据给前端,前端data中定义全局变量接收数据

created()里面的方法什么时候被调用

在vue实例创建完成后被立即调用。

例如:当需要将数据库数据显示到页面时,就可以将获取表数据的方法在created()进行调用,在页面渲染之前就将数据获取

  created() {
      this.getTeacherList()
      this.getSubjectList()
  },
  methods: {
    getSubjectList() {
      subject.getSubjectList()
        .then(response => {
          this.oneSubjectList = response.data.list
        })
    },
    getTeacherList() {
      teacher.getAllEduteacherList()
        .then(response => {
          this.teacherLIst = response.data.items
        })
    }}

created()里面方法的执行顺序
对于普通的方法调用,顺序执行

data(){
return{
     str:'消闲'
   }
 },
created() {
   console.log(this.str)
   this.change()
   console.log(this.str)
 },
 methods: {
   change(){
     this.str='xiaoxian'
   }}

输出:

消闲
xiaoxian

对于要调用数据库的多个方法

并不是按照顺序执行,如果将多个这种类型的方法放入created()中会造成数据获取失败

如下这种形式,下面4种方法都要调用同一数据库

  created() {
      this.courseId = this.$route.params.id
      this.getCourseInfoV()
      this.getTeacherList()
      this.getTwoSubjectList(this.conrseInfoVo.subjectParentId)
      this.getSubjectList()
  }
结果是有关联的getTwoSubjectList和getSubjectList获取的数据为空

原因:这是因为js中默认执行网络请求是异步的,他们会按顺序发出请求之后就不管了,谁先返回是不确定的,这样在加载数据的时候不会因为某个网络请求慢,而在一直等待那个请求,导致其他请求阻塞,效率,体验很差

解决方法:
如果一次加载页面需要执行多个网络请求,并且对返回的数据顺序是有要求的,就用.then()函数,当这个函数执行完后再执行下个函数

将上面调用一个数据库的方法之间有数据联系的放在一个方法中

 getCourseInfoV() {
      course.getCourseInfo(this.courseId)
        .then(response => {
          this.conrseInfoVo = response.data.courseInfoList
          subject.getSubjectList()
            .then(response => {
              this.oneSubjectList = response.data.list
              for (var i = 0; i < this.oneSubjectList.length; i++) {
                var oneSubject = this.oneSubjectList[i]
                if (this.conrseInfoVo.subjectParentId == oneSubject.id) {
                  this.twoSubjectList = oneSubject.children
                }
              }
            })
          this.getTeacherList()
        })
    }
  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

B64A-消闲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值