Vue |
您所在的位置：网站首页 › 前端渲染页面设置方法 › Vue |
|
什么时候使用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.twoSubjectList = oneSubject.children } } }) this.getTeacherList() }) } |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |