生命周期示例
Vue的生命周期主要分三个阶段
Vue3
Vue2
Vue2与Vue3生命周期的区别
1.在Vue3中，beforeCreate与created钩子被setup()替换
2.一些钩子函数的重命名
- beforeMounted -> onBeforeMounted
- mounted -> onMounted
- beforeUpdate -> onBeforeupdate
- updated -> onUpdated
- beforeDestroy -> onBeforedestroy
- destroyed -> onDestroyed
父子组件的生命周期
- 加载渲染阶段：
graph TD
父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件mounted --> 父组件mounted
- 更新阶段：
graph TD
父组件beforeUpdate --> 子组件beforeUpdate --> 子组件updated --> 父组件updated
- 销毁阶段
graph TD
父组件beforeDestroy --> 子组件beforeDestroy --> 子组件destroyed --> 父组件destroyed
生命周期的每个阶段适合做什么
- created
此时Vue实例创建完毕，可以访问到data，watch，computed，methods上的方法和数据，但此时还未将虚拟DOM挂载到真实DOM上，所以此时访问不到DOM元素
在这个时候可以进行简单的AJAX操作，并可以对页面进行初始化的操作如获取后台的数据等 - beforeMount
在挂载前调用，此时回去找虚拟DOM，并将其编译成Render
在这个时候时候进行echart,antvg2图表数据的获取 - Mouted
此时虚拟DOM已经挂载到真实DOM上，可以获取DOM几点，也可以访问到$ref
此时可以获取到节点信息，对节点做操作 - beforeUpdate
在响应式数据被更新时会调用，此时虚拟DOM还未被更新，可以访问到现有的DOM
此时仍可以访问到现有的DOM，适合手动移除一些监听事件 - updated
此时补丁已经更新，DOM已经更新完毕
在这个时候不适合进行数据操作 - beforeDestroy
在实例销毁之前调用，此时实例仍未被销毁
此时可以销毁定时器，解绑全局事件，销毁插件对象等
