Vue---created()使用的注意事项--执行顺序
vue框架中通常在created钩子函数里执行访问数据库的方法,然后返回数据给前端,前端data中定义全局变量接收数据。例如:当需要将数据库数据显示到页面时,就可以将获取表数据的方法在created()进行调用,在页面渲染之前就将数据获取。并不是按照顺序执行,如果将多个这种类型的方法放入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()
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)