A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 小江哥 黑马粉丝团   /  2019-3-22 12:51  /  2648 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小江哥 于 2019-3-23 20:22 编辑

1. 什么时候从后台获取数据组好?
其实Vue并没有规定什么时候获取数据最好,我们从每个钩子函数定义便可知,只要在Vue实例创建之后,也就是created中及以后的所有钩子函数里都可以从后台获取数据。但是,这里我建议大家还是在created钩子函数就获取数据,然后进行数据操作。原因嘛就是,从beforeCreate到mounted,这中间是一个流程,而且是不受任何东西影响的,并且数据请求是个异步的过程,而生命周期并不是等待数据返回再接着运行。举个例子:
1
2
3
<ul>
    <li v-for="item of source" :key="item" ref="item"></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
data(){
    return{
        source:[]
    }
},
created(){
    ...从后台获取数据
    this.source = response//将data里数据赋值为获取到的数据
},
mounted(){
    //假如有一个数组项值为'Alan'
    console.log(this.$refs.Alan)
    //这里可能会报错,此时的refs显示为未定义的Object的属性
}
为什么可能会报错呢?其实,在大多数网络情况下,是肯定会报错。因为数据请求是个异步的操作,取决于网络情况和数据量的大小,谁都不知道什么时候才会返回完整的数据。而Vue的周期函数不会等待数据全部返回完毕后再接着从created往下走,而是一旦created了,就会接着beforeMount,然后mounted。所以,当我们在mounted里试图通过$refs属性获取v-for渲染的DOM时就会报错了,因为在mounted阶段,说不准数据还没返回完呢 那虚拟DOM就还没完全渲染出真实DOM。当然,只有通过v-for渲染的DOM才会受影响。其余的我们自己写的正常html标签都可以正常获取…
那么,应该怎样获取我们通过后台返回数据而渲染的DOM节点呢?
2. updated是个好东西
通过上文即可知道,updated是不需要渲染真实DOM之后才能调用的钩子。也就是说,我们不需要担心什么时候真实DOM才会被渲染完成。上述代码改成这样:
1
2
3
<ul>
    <li v-for="item of source" :key="item" ref="item"></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
data(){
    return{
        source:[]
    }
},
created(){
    ...从后台获取数据
    this.source = response//将data里数据赋值为获取到的数据
},
updated(){
    this.$nextTick(()=>{
        //假如有一个数组项值为'Alan'
        console.log(this.$refs.Alan)
        //这里可能会报错,此时的refs显示为未定义的Object的属性
    })
}
只要原始数据source发生了改变,就可以在updated里执行代码。这里要注意的是,我使用了一个Vue的自带方法$nextTick。这个方法的意思是把回调函数内的操作延迟到下一个DOM更新循环之后。这又是个啥玩意,其实Vue本身会将所有DOM更新的操作放入一个队列里,然后根据实际情况(应该会考虑到性能)一个接一个执行真实的DOM更新(局部更新),$nextTick就是会将方法内回调函数的操作延迟到队列里下一个DOM更新后执行。也就是说,会等到source获取完毕,然后真实DOM渲染完成后才执行。$nextTick非常常用,只要涉及到数据更新,就应该执行这个方法。
总结
Vue的生命周期函数为开发者提供了非常便利的操作。但是善用生命周期才会不踩坑,一定需要注意数据获取是个异步过程,而生命周期函数的运行是独立的!只要涉及到DOM更新的操作,一定要使用$nextTick!

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马