Vue生命周期钩子函数

生命周期钩子函数，类比Spring里的bean的生命周期

在官网中找到这个Vue 实例 — Vue.js

 

在main.js中都会new Vue 这个实例

1、beforeCreate这个钩子函数，函数执行的时候，组件里的实例并没有被创建，这个函数里面并不知道data是什么

2、created 这个时候，实例创建了，data可以获取，监听数据了，但是页面看不到

3、el:"#app"  这个在main.js中，用的是mount('#app')，也可以这么写，el.“#app”看vue实例是否有这个，是否有挂载的一个容器。如果没有就看有没有mount

然后看是否有tempate这个标签

4、beforeMount ，准备要挂载，但是页面还是空白的，render函数第一次被调用了

5、mounted页面挂在了，就可以看到页面了

6、beforeUpdate 当数据被修改了，就要执行beforeUpdate，虚拟DOM重新渲染重新绑定，更新数据之前

7、updated数据更新完成了，

8、beforeDestroy， 当执行beforeDestroy钩子函数时，Vue实例就已经从运行阶段进入销毁的阶段，此时，组件中的所有的data、methods、以及过滤器指令等，都处于可用状态，此时还未真正执行销毁过程，Vue实例销毁执行的钩子函数

9、destroyed 当执行destroyed函数时，组件已经被完全销毁，此时组件中所有data、methods、以及过滤器、指令都不能用了。实例完成被销毁了，生命周期就结束。

然后使用代码来验证，在Header.vue里添加这几个钩子函数。通过alert打印，看执行的一个顺序，当点击修改的时候触发beforeUpdate、updated

1、beforeCreate

2、created

 

 3、beforeMount

4、mounted

 

5、beforeUpdate

 

6、updated