vue生命周期和钩子函数—什么时候该干什么事

vue生命周期
说到vue的生命周期其实并不难理解,就是从一个vue项目创建,渲染,数据更新、销毁。
vue提供了6个钩子函数,每进入一个周期时就会触发对应的钩子函数,例如当页面离开后你想销毁一个定时器,那么这时候就要在销毁前的钩子函数里执行。这就是它们的作用。

beforeCreated
每一个页面都是一个vue实例,这时实例还没有被创建,所以你无法知道data,也不能用watch监听

created
这时实例已经创建,可以得到data,调用watch,但是页面还是空白的

beforeMounted
页面挂载前,此时页面依然是空白的。这时render函数首次被调用。

mounted
页面挂载了,这时你可以看到页面的内容,也可以访问到dom

beforeUpdate
数据更新前,也就是虚拟DOM打补丁之前。这时访问到的DOM还有原有的DOM

update
数据更新完毕后。注意,如果当前页面有挂载子组件,子组件更新时它并不能保证子组件也重绘了。如果你想确定是整个dom都更新可以使用 this.$nextTick()

activated和deactivated
keep-alive特有的钩子函数,当被这个标签包裹的组件被激活或停用时触发

bedoreDestroy
当你离开这个页面前被调用。例如说取消定时器,使用了第三方库留下了多余的DOM结构,都可以在这个时机删除,避免内存泄漏。

destroy
这时候实例已经被完全销毁

    原文作者:someone
    原文地址: https://segmentfault.com/a/1190000019582849
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞