Vue 生命周期
Vue 声明周期表格
一说到 Vue 的生命周期,大家都能说上来一点.我自己会随着自己对 Vue 的深入了解,不断的完善自己对 Vue 的整体认识。
本文 Vue 的版本 Vue 2.x
官方生命周期图解:
生命周期钩子 | 详细 |
---|---|
beforeCreate | 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。 |
created | 在实例创建完成后被立即调用。在这一步,实例已经完成以下配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没有开始,\$el 属性目前不可见。 |
beforeMount | 在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。 |
mounted | el 被新创建的vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。 注意 mounted 不会 承诺所有的子组件也一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.\$nextTick 替换掉 mounted。 该钩子在服务器端渲染期间不被调用。 |
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现在的 DOM,比如手动移除已添加的事件监听器。该钩子在服务器渲染期间不被调用,因为只有初次渲染会在服务器端运行 |
updated | 由于数据更改导致的虚拟 dom 重新渲染和打补丁,在这之后会调用该钩子。 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然后在大多数情况下,你应该避免在此期间更改状态。如果要相应的状态改变,通常最好使用 计算属性 或watcher 取而代之。 注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.\$nextTick 替换掉 updated 。 |
beforeDestory | 实例销毁之前调用。在这一步,实例仍然完全可用。 该钩子在服务器端渲染期间不被调用。 |
destoryed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。 |
示例代码
1 |
|
注意事项
1、beforeMount 生命周期之前
在这个调用beforeMount
判断vm.$options是否存在el
,如果没有的话则会停止编译
,也就意味着停止了生命周期
,直到在改vue实例上调用vm.$mount(el)
。
vue 的实现代码:如果存在el
时
1 | if (vm.$options.el) { |
原型上的$mount
实现
1 | Vue.prototype.$mount = function (el, hydrating) { |
如果我们注释掉上面el
属性的代码,并且不再后续调用vm.$mount(el)
1 | // el: '#app' |
如果没有el
他只会执行前两个生命周期beforeCreate、created
,如果我们在后续调用了vm.\$mount(el)
,可以发现代码继续向下执行了
在浏览器上调用:
1 | vm.$mount('#app'); |
他就会接着执行下去
2、template 属性、outer html、render 函数三个优先级
- 如果直接调用
render
函数,那么他的优先级最高。 - 如果
vue
实例对象中有template
参数选项,则将其作为模板编译成render
函数。 - 如果没有
template
选项,则将外部HTML
作为模板编译。 - 可以看到
template
中的模板优先级要高于outer HTML
的优先级。
1 |
|
3、mounted
可以看到此时是给vue
实例对象添加$el
成员,并且替换掉挂在的DOM
元素。因为在之前console
中打印的结果可以看到beforeMount
之前el
上还是undefined
4、mounted
在mounted
之前h1
中还是通过进行占位的,因为此时还有挂在到页面上,还是
JavaScript
中的虚拟DOM
形式存在的。在mounted
之后可以看到h1
中的内容发生了变化。
5、beforeUpdate 和 updated
当vue
发现data
中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdate
和updated
钩子函数。我们点击当前的p
标签就会触发data
中的message
更新
6、beforeDestroy 和 destroyedbeforeDestroy
钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。destroyed
钩子函数在Vue
实例销毁后调用。调用后,Vue
实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。