vue生命周期,vue钩子函数

前端这点事 8 0

beforeCreate

这个阶段,实例已经初始化,但是数据和事件还没有形成,不能获取DOM节点

这个时候 实例的数据(data)和 方法函数(methods)都获取不到,所以通常会在形成实例之前使用。

没有data,没有el

created

这个阶段,实例已经创建, 实例的数据(data)已经生成,但是DOM依旧没有生成,也就是获取不到DOM节点。

在这个函数里, 通常是用来 作为子组件或者兄弟组件,接收父组件或者兄弟组件的传值

有data,没有el

beforeMount

这个阶段Vue挂载的根节点已经生成,数据也有,但是仍然获取不到具体的DOM节点。可以理解为一个过渡节点。

有data,没有el,Vue实例根节点生成。

mounted

这个阶段,模板(html)已经开始渲染,可以理解为页面初始化完成,可以对初始化页面的数据和DOM元素进行一系列的处理,在项目中经常使用到。

对于页面初始化的一些操作,在这里进行比 created 里操作 理论上效果较好。

有data,有DOM

beforeUpdate

检测到数据进行更新时,但是DOM还没有更新(因为Vue 是 数据驱动的更新 驱动 DOM 的更新。

补充: $nextTick 也为一个重要知识点吧,日后做笔记。

updated

数据和DOM的完成了更新后,触发此函数。

beforeDestroy

在要销毁Vue实例的时候之前触发的此函数 (可以理解为你切换到别的页面时,就是要销毁vue实例)。

destroyed

在销毁vue实例时执行。


第一次页面加载会触发哪些钩子?

beforeCreate、created、beforeMount、mounted。

Vue不同页面跳转时各页面生命周期的执行顺序?

假设 要从 login 页面 跳转 到 index 页面, 其执行的生命周期函数顺序为


index ------ beforeCreated index ------ created index ------ beforeMount login ------ beforeDestroy login ------ destroyed


标签: Vue

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~