什么时候使用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()
        })
    }
Logo

前往低代码交流专区

更多推荐