什么是生命周期?
vue实例从创建到销毁的过程称之为vue的生命周期。
生命周期函数
beforeCreate 实例创建前:
这个阶段实例的data、methods是读不到的。
created 实例创建后:
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer)、属性和方法的运算,watch/event 事件回调;然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount挂载前:
在挂载开始之前被调用,相关的 render 函数首次被调用。
mounted挂载后:
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
beforeUpdate更新前:
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
updated更新后:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作,然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之
beforeDestory销毁前:
实例销毁之前调用,在这一步,实例仍然完全可用。
destroyed销毁后:
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
生命周期图

vue生命周期在真实场景下的业务应用?
created:进行ajax请求异步数据的获取、初始化数据
mounted:挂载元素内dom节点的获取
nextTick:针对单一事件更新数据后立即操作dom
updated:任何数据的更新,如果要做统一的业务逻辑处理
watch:监听具体数据变化,并做相应的处理,不支持缓存,支持异步数据
computed:vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新(当一个数据受到多个数据影响),支持缓存,不支持异步数据
Vue的生命周期包括beforeCreate、created、beforeMount、mounted等阶段,每个阶段都有特定的任务,如created时适合获取异步数据,mounted可操作DOM。updated用于数据更新后的处理,watch和computed则分别针对数据变化的响应和计算属性的缓存。
3008

被折叠的 条评论
为什么被折叠?



