Vue的学习笔记-Day2-02(生命周期图示)

生命周期图示

lifecycle.png

生命周期钩子 = 生命周期函数 = 生命周期事件

var vm = new Vue({}) 表示开始创建一个Vue的实例对象

表示，刚初始化了一个Vue的空的实例对象，这个时候，这个对象身上，只有默认的一些生命周期函数和默认时间，其他的东西都未创建

注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化

在created中，data和methods都已经被初始化好了

如果要调用 methods 中的方法，或者要操作data中的数据，最早只能在created中操作

在beforeMount执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串

beforeMount执行的时候，模板已经在内存中挂载好了，但是尚未挂载到页面中去，此时页面还是旧的

mounted是实例创建期间的最好一个生命周期，当执行完mounted就表示实例已经被完全创建好了。此时，如果没有其他操作的话，这个实例就被保存到内存中了

如果要通过某些插件操作页面上操作Dom节点，最早要在mounted中进行

只要执行玩了mounted，就表示整个vue实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入了运行阶段。

在组件运行阶段的生命周期函数只有两个：beforeUpdated 和 updated，这两个事件，会根据data数据的改变，有选择性的触发0次到多次

beforeUpdated执行的时候，表示我们的界面中显示的数据还没有被更新，而data中的数据已经更新，data和页面还未被同步

updated执行的时候，页面和data数据已经保持同步了。都是最新的数据。

当执行beforeDestroy钩子函数的时候，vue实例就已经从运行阶段进入到了销毁阶段。当执行了beforeDestroy的时候，实例身上的所有data和所有methods，以及过滤器，指令等等，都处于可用状态，此时，还没有真正执行销毁过程。

当执行到了destroyed函数的时候，组件已经被完全销毁了。此时组件中所有的数据方法，指令，过滤器等等都已经不可用了。