Vue生命周期各阶段都适合干什么

40 阅读1分钟

我们来讲讲,在不同的阶段我们可以做些什么:

created: 在Vue实例创建完毕状态,我们可以去访问data、computed、watch、methods上的方法和数据,但现在还没有将虚拟Dom挂载到真实Dom上,所以我们在此时访问不到我们的Dom元素(el属性,ref属性此时都为空)。

我们在此时可以进行一些简单的Ajax,并可以对页面进行初始化之类的操作

beforeMount: 它是在挂载之前被调用的,会在此时去找到虚拟Dom,并将其编译成Render

mounted: 虚拟Dom已经被挂载到真实Dom上,此时我们可以获取Dom节点,$ref在此时也是可以访问的。

我们在此时可以去获取节点信息,做Ajax请求,对节点做一些操作

beforeupdate: 响应式数据更新的时候会被调用,beforeupdate的阶段虚拟Dom还没更新,所以在此时依旧可以访问现有的Dom。

我们可以在此时访问现有的Dom,手动移除一些添加的监听事件

updated: 此时补丁已经打完了,Dom已经更新完毕,可以执行一些依赖新Dom的操作。

但还是不建议在此时进行数据操作,避免进入死循环(这个坑我曾经踩过)

beforeDestroy: 在Vue实例销毁之前被调用,在此时我们的实例还未被销毁。

在此时可以做一些操作,比如销毁定时器,解绑全局事件,销毁插件对象等