[学习交流] Vue的生命周期函数中需要注意的一些坑

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

1. 什么时候从后台获取数据组好？

其实Vue并没有规定什么时候获取数据最好，我们从每个钩子函数定义便可知，只要在Vue实例创建之后，也就是created中及以后的所有钩子函数里都可以从后台获取数据。但是，这里我建议大家还是在created钩子函数就获取数据，然后进行数据操作。原因嘛就是，从beforeCreate到mounted,这中间是一个流程，而且是不受任何东西影响的,并且数据请求是个异步的过程，而生命周期并不是等待数据返回再接着运行。举个例子：

1
2
3

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

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！

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] Vue的生命周期函数中需要注意的一些坑

0 个回复