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()
        })
    }