vue生命周期及用法介绍

83 阅读1分钟

beforeCreate 英 /kriˈeɪt/

new vue创建实例化之后,数据观测(data observe)  和event/watcher事件配置之前被调用

created 英 /krɪ'eɪtɪd/

实例已经创建完成之后被调用。
在这一步,实例已完成以下的配置:数据观测(data observe),属性和方法的运算,
watch/event事件回调i。然而,挂载阶段还没开始, $el属性目前还没暂时不存在

beforeMount 英 /ˈmaʊnt/

 在挂载开始之前被太欧阳: 相关的render函数(模板)首次被调用.
 例如通过v-for生成的html还没有正式挂载到页面上去

Mounted 英 /ˈmaʊntɪd/

el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子
有初始化的DOM渲染,例如我们data()里面的初始化数据,

beforUpdate 英 /ˌʌpˈdeɪt/

当我们更改vue的任何数据,都会触发该函数,数据更新时调用,发生在虚拟DOM重新渲染和补丁之前。

Updated 英 /ʌp'deɪtɪd/

 由于数据更改导致虚拟DOM重新渲染和打补丁,在这之后会调用钩子
 钩子被调用时,组件DOM已经更新,所以现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可以会导致更新无限循环
  数据更新就会触发(vue所有的数据只有更新就会触发),如果想数据一遍就做统一,可以用这个,如果想对不同数据的更新做不同的处理nextTick,或wacth进行监听

beforeDestory 英 /dɪˈstrɔɪ/

  实例销毁之前调用,到这一步,实例仍然完全可用。

destroyed 英 /dis'trɔid/

实例销毁后调用。调用后,vue实例指示的所有东西都会解绑定,所有事件监听器会被移除,所有的子实例也会销毁。该钩子服务器渲染期间不被调用。