vue生命周期
beforeCreate: 表示刚初始化了一个 Vue 空的实例对象,在这个对象上,只有默认的一些生命周期函数和默认的事件,其他的东西都未创建。 注意:在 beforeCreate 生命周期执行的时候,data、methods 和 el 中的数据都还没被初始化,所以上述显示两个 undefined。
created: 表示 data、methods 已经初始化好了,所以 this.msg 变成了 hello Vue 。注意:如果要调用 methods 中的方法,或者操作 data 中的数据,最早只能在 created 中操作。
beforeMount:表示 Vue 开始编辑模板,把 Vue 代码中的那些指令进行执行,最终在内存中生成一个编译好的模板字符串,然后把这个模板字符串渲染为内存中的 DOM。此时,只是在内存中渲染好了模板,并没有把模板挂载到真正的页面中去,所以显示{{msg}}
mounted:表示将内存中编译好的模板,真实的替换到浏览器的页面中去,所以此时页面上显示 hello Vue。 注意:1.如果要通过某些插件操作页面上的 DOM 节点,最早要在 mounted 中进行。 2.只要 mounted 执行完了,就表示整个 Vue 实例已经初始化完毕了。此时,组件已经脱离了创建阶段,进入到了运行阶段。
beforeUpdate 和 updated:这两个事件会根据 data 数据的改变,有选择性的触发 0次 到 多次。注意:updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的。
beforeDestroy:当执行 beforeDestroy钩子函数的时候, Vue 实例已经从运行阶段,进入到了销毁阶段。当执行 beforeDestroy的时候,实例身上所有的 data 和 所有的 methods,以及过滤器、指令……都出于可用状态,此时,还没有真正执行销毁的过程。
destroyed:当执行到 destroyed 函数的时候,组件已经完全销毁,此时,组件中的所有的 data 和 所有的 methods,以及过滤器、指令……都已经不可用了。