Vue生命周期

最新推荐文章于 2022-10-31 10:18:26 发布

tiansuohao2

最新推荐文章于 2022-10-31 10:18:26 发布

阅读量94

点赞数 1

文章标签： Vue 生命周期 nextTick

本文链接：https://blog.csdn.net/qq_35498516/article/details/89520734

版权

创造阶段（created，beforeCreate）
- created
  - 没有this.$el
  - 也没有真是的dom
  - 但是已经有数据，那么可以再这里去更改数据。如果数据是同步修改，就是带入到下一个生命周期。如果是异步修改，当数据改完之后就会进入更新阶段，推荐在这个阶段ajax请求。
挂载阶段
beforeMount：
- 这里已经能看到this.$el,但是还没有进行真是的模板数据替换。
mounted：
- 在这里this.$el已经是真实的数据渲染的dom。在这里才能取到真实的dom，如果想要取到真实的dom，一般在这之后。一些第三方的dom操作也会在这里来进行初始化，仅限没有异步数据的dom，有些人也喜欢在这里做ajax请求。
更新
- beforeUpdate
  - 这里基本上不做太多事情
- updated
  - 有可能需要在这里来重新初始化第三方的dom操作插件
销毁
- beforeDestroy
  - 在这里一般会去解除一些事件的监听
- destroyed

this.$nextTick

//方法1
this.$nextTick().then(()=>{
   this.init()
})
//方法2
this.$nextTick(()=>{
    this.init()
})

该方法用于ajax请求，处理异步。

在created时，dom还是没有应用新数据的dom

而this.$nextTick里的dom就是已经使用了更新的数据的dom。
该方法与updated效果差不多。

关注