项目描述
上传时间
浏览人数
Vue的生命周期:)
创建阶段的两个勾子
beforeCreate:第一个生命周期函数,表示实例完全被创建之前,会执行这个函数在beforeCreate生命周期函数 执行的时候,data 和 methods 中的数据还没有被初始化
created:在 created 中,data 和 methods 都已经被初始化好了!如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
挂载阶段的两个勾子
beforeMount:第三个生命周期函数,表示模板已经在内存中编译完成,但是尚未把模板渲染到页面中在beforeMoun t执行的时候,页面中的元素没有被真正替换过来,知识之前写的一些模板字符串
mounted:实例挂载完成,第四个生命周期函数,表示内存中的模板已经真实的挂载到页面中,用户已经可以看到渲染 好的页面这个mounted是实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好 了,此时,如果没有其它操作的话,这个实例,就静静地在内存中不动
更新阶段的两个勾子
beforeUpdate:第五个生命周期函数,表示 界面还没有被更新,但是数据肯定被更新了得出结论:当执行 beforeU pdate 的时候,页面中的显示的数据,还是旧的,此时data 数据是最新的,页面尚未和 最新的数据保持同步
updated:updated事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
销毁阶段的两个勾子
beforeDestroy:组件销毁之前
destroyed:组件摧毁之后
简单示例及图文:
创建及挂载:
更新阶段:
销毁阶段: