vue 生命周期

128 阅读2分钟

概述

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

beforeCreate:

vue实例中的el,data,data中的message都为undefined

created:

el还是undefined,而数据已经与data中的属性进行绑定(放在data中属性当值发生改变的同时,视图也会发生变化),在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

从created到beforeMount的过程中:

  1. 首先会判断vue实例中有没有el选项,如果有的话则进行下面的编译,但是如果没有el选项,则停止生命周期,直到vue实例上调用vm.$mount(el)。
  2. 如果有el,再判断是否有template参数,如果有,则把其当作模板编译成render函数,如果没有,则把外部的html作为模板编译。template中的模板优先级高于outer HTML模板。
  3. 在vue对象中还有一个render函数,它是以createElement作为参数,然后做渲染操作,而且我们可以直接嵌入JSX.
  4. 综合排名优先级:render函数选项 > template选项 > outer HTML.

如果要在created阶段中进行dom操作,就要将操作都放在 Vue.nextTick() 的回调函数中,因为created() 钩子函数执行的时候 DOM 其实并未进行任何渲染,而此时进行 DOM 操作无异于徒劳,所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。

Vue.nextTick( [callback, context] ):在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

Vue.nextTick(() => {
callback
})

beforeMount:

载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位符,data中的message信息没有被挂在到Bom节点中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

mounted:

载入后html已经渲染(ajax请求可以放在这个函数中),把vue实例中的data里的message挂载到节点中去

beforeUpdate:

更新前状态(view层的数据变化前,不是data中的数据改变前),重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染

只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发

updated:

数据已经更改完成,dom也重新render完成

beforeDestroy:

销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)

destroyed:

销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher,事件监听,子组件

生命周期总结

beforecreate : 可以在这加个loading事件 created :在这结束loading,还做一些初始数据的获取,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情 beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容

父子组件生命周期

  1. 父子组件在加载的时候,执行的先后顺序为父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted;
  2. 更新时beforeUpdate函数的传递顺序为由父到子,updated的传递顺序为由子到父;
  3. 销毁时beforeDestory函数的传递顺序为由父到子,destory的传递顺序为由子到父。