1.生命周期分类
在大数据机构数据分析培训中,vue的每个组件都是独立的,每个组件都有一个属于它的生命周期。
从一个组件中创建和初始化数据,挂载,更新,销毁,这就是所谓的组件生命周期。组件中的具体方法有:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
2、beforeCreate(创建前)
实例初始化后,在数据观察和事件配置前调用。这时候组件的option对象还没有被创建,el和data也没有被初始化,所以method、data、computed等上的方法和数据是无法访问的。
3、created(创建后)
实例创建后调用。这一步,实例已经完成了如下配置:数据观察,属性和方法的计算,watch/Event事件回调,完成了数据数据的初始化,el没有。但是,挂起阶段还没有开始,$el 属性目前是不可见的。这是一个常见的生命周期,因为你可以在method中调用方法,在data中修改数据,通过vue的reactive binding来修改。在页面上,在computed等中获取计算得到的属性,通常我们可以在这里对实例进行预处理
4,beforeMount(挂载前)
hang before the start 当它是调用,第一次调用相关render函数(虚拟DOM),示例完成了如下配置: 编译模板,从data和data中的模板生成html,完成el和data的初始化,注意说明此时还没有链接到 html 页面。
5、mounted(挂载后)
挂载完成,即模板中的HTML渲染到HTML页面。这时候一般可以做一些ajax操作,mounted只执行一次。
6、beforeUpdate(更新前)
在数据更新前调用,发生在虚拟DOM重新渲染和打补丁之前。可以使用这个钩子进一步改变进程中的状态不会触发额外的重新渲染进程
7、更新(updated)
在虚拟 DOM 由于数据变化只能调用重新渲染和修补。调用时,组件 DOM 已更新,因此可以执行依赖于 DOM 的操作。那么在大多数情况下,您应该避免在此期间更改状态,因为这可能会导致无限更新循环。服务端渲染时不调用此钩子
8、beforeDestroy(销毁前)
在实例销毁前调用,实例仍完全可用,这个你也可以用它一步获取实例。一般会在这一步做一些reset操作,比如清除组件中的定时器和监听的dom事件。
9、销毁(After destroy)
在实例销毁后调用。调用后,所有事件侦听器将被删除,所有子实例也将被销毁。在服务器端渲染期间不会调用此钩子。