Vue生命周期方法

2019-11-13120次阅读vue

vue生命周期分为初始化阶段4个beforeCreate、created、beforeMount、mounted,运行中阶段2个beforeUpdate、updated,销毁阶段2个beforeDestroy、destoryed。

 

【初始化阶段(4个)】

(1)beforeCreate

此钩子函数不能获取到数据,dom元素也没有渲染出来,此钩子函数不会用来做什么事情。

(2)created

此钩子函数,数据已经挂载了,但是dom节点还是没有渲染出来,在这个钩子函数里面,如果同步更改数据的话,不会影响运行中钩子函数的执行。可以用来发送ajax请求,也可以做一些初始化事件的相关操作。

(3)beforeMount

代表dom节点马上要被渲染出来了,但是还没有真正的渲染出来,此钩子函数跟created钩子函数基本一样,也可以做一些初始化数据的配置。

(4)mounted

是生命周期初始化阶段的最后一个钩子函数,数据已经挂载完毕了,真实dom也可以获取到了。

 

【运行中阶段(2个)】

(5)beforeUpdate

运行中钩子函数beforeUpdate默认是不会执行的,当数据更改的时候,才会执行。数据更新的时候,先调用beforeUpdate,然后数据更新引发视图渲染完成之后,再会执行updated。运行时beforeUpdate这个钩子函数获取的数据还是更新之前的数据(获取的是更新前的dom内容),在这个钩子函数里面,千万不能对数据进行更改,会造成死循环。

(6)updated

这个钩子函数获取的数据是更新后的数据,生成新的虚拟dom,跟上一次的虚拟dom结构进行比较,比较出来差异(diff算法)后再渲染真实dom,当数据引发dom重新渲染的时候,在updated钩子函数里面就可以获取最新的真实dom了。

 

【销毁阶段(2个)】

(7)beforeDestroy

切换路由的时候,组件就会被销毁了,销毁之前执行beforeDestroy。在这个钩子函数里面,我们可以做一些善后的操作,例如可以清空一下全局的定时器(created钩子函数绑定的初始化阶段的事件)、清除事件绑定。

(8)destoryed

组件销毁后执行destroyed,销毁后组件的双向数据绑定、事件监听watcher相关的都被移除掉了,但是组件的真实dom结构还是存在在页面中的。也就说如果想要对残留的dom结构进行处理必须在destroyed生命周期函数中处理。

添加keep-alive标签后会增加active和deactive这两个生命周期函数,初始化操作放在actived里面,一旦切换组件,因为组件没有被销毁,所以它不会执行销毁阶段的钩子函数,所以移除操作需要放在deactived里面,在里面进行一些善后操作,这个时候created钩子函数只会执行一次,销毁的钩子函数一直没有执行。

上一篇: 零宽字符&摩斯电码  下一篇: 拷贝JS数组的12种技巧  

Vue生命周期方法相关文章