Vue的生命周期详解

·  阅读 781

1.简述:在Vue中,每个组件从加载到渲染都会经过一个生命周期:创建,初始化,挂载,更新,销毁。其中钩子函数分为八部分beforeCreate created beforeMount mounted beforeUpdate updated beforeDistory distoryed

2.钩子函数用法:

1)beforeCreate:此时组件的节点没创建,data和methods属性还没初始化好。 2)created:此时组件的data和methods已经创建ok,但未开始编译模板。 在created中能进行调用接口操作,比如获取渲染表格中的数据 能接受路由传参的参数: 如果要通过id或ref获取标签属性,可以通过this.$nextTick回调来进行

  1. beforeMounted:模板编译完成,但未渲染到页面上,可进行的操作与created相似。

4)mounted:挂载完成,能正常获取dom节点。

5)beforeUpdate:在更新之前执行此函数,此时 data 中的状态已经是最新的了,但是页面没有渲染上去,效果未展示。

6)updated:得到最新的状态,页面也得到最新的渲染。updated用法与comptued和watch相似,能通过数据变化来判断起到监听的作用。比如在updated中监听指定password进行操作

7)beforeDestroy:在组件销毁之前调用。在这一步,仍然完全可用。

8)destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

分类:
前端
标签: