vue 生命周期

作者: 静小弟 | 来源:发表于2020-02-18 15:34 被阅读0次

vue生命周期
vue生命周期
Vue生命周期
vue3较vue2的特别之处 - 生命周期
前端之路-VUE面试题
Vue.js入门（二）：生命周期
vue生命周期
Vue 生命周期
vue学习记录
Vue生命周期

The Vue Instance Lifecycle

// 生命周期源码部分 created之前发生了什么
vm._self = vm
initLiftcycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)// resolve injections before data/props
initState(vm)
initProvide(vm)// resolve provide after data/props
callHook(vm, 'created')

钩子	描述
initEvents	初始化实例及生命周期
beforeCreate	this. $el和this.$ data及this.message都是undefined
initInjections	将data和props注入到实例
created	this. $data和this.message已被初始化， this.$ el = undefined。改变data中属性的值，视图也会被改变。
has 'EL' option？	判断有无挂载点，有挂载点继续执行生命周期，否则生命周期停止。
has template？	判断有无模板，有模板进行complier进行编译，render>template选项>outerHTML
beforeMount	挂载前。this. $data和this.message已被初始化，此时还没能拿到this.$ el，el还是{{message}}<br />父子组件的执行顺序是先父后子
create $el and replace 'el' with it	vue实例对象添加$el成员，并且替换掉挂在的DOM元素。所有的挂载元素会被 Vue 生成的 DOM 替换。
mounted	挂载结束。把{{message}}的值渲染上去，此时能拿到this.$el(dom节点)<br />父子组件的执行顺序是先子后父
beforeUpdate	更新状态前。
updated	更新完成。vue发现data中的数据发生改变，会触发生命周期函数重新渲染。
beforeDestroy	实例销毁前调用，这一步，实例仍然可用 <br />父子组件的执行顺序是先父后子
teardown watcher...	销毁过程中，销毁监听器，子组件，事件监听器..
destroyed	vue实例销毁后调用。<br />父子组件的执行顺序是先子后父