我们来讲讲,在不同的阶段我们可以做些什么:
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实例销毁之前被调用,在此时我们的实例还未被销毁。
在此时可以做一些操作,比如销毁定时器,解绑全局事件,销毁插件对象等