这次给大家带来vue组件生命周期使用方法，vue组件生命周期使用的注意事项有哪些，下面就是实战案例，一起来看一下。
分为4个阶段：
create/mount/update/destroy
每一个阶段都对应着有自己的处理函数
create: beforeCreate created
初始化
mount: beforeMount mounted
和挂载相关的处理
update: beforeUpdate updated
根据要更新的数据 做逻辑判断
destroy:beforeDestroy destroyed
清理工作
代码：
生命周期
{{msg}}
Vue.component("my-component",{ template:`
component:{{count}}
`, data:function(){ return { count:0 } }, methods:{ handleClick:function(){ this.count++; } }, beforeCreate: function () { console.log('准备创建组件'); }, created: function () { console.log('组件创建完毕'); }, beforeMount: function () { console.log('组件的模板准备挂载到DOM'); }, mounted: function () { console.log('挂载完毕'); }, beforeUpdate: function () { console.log('准备更新了'); }, updated:function(){ console.log('更新完成'); }, beforeDestroy: function () { console.log('准备destroy'); }, destroyed: function () { console.log('destroy完成'); } }) new Vue({ el:"#container", data:{ msg:"Hello VueJs", isShow:true } })
登录后复制
生命周期练习，需要那阶段写那个阶段
生命周期练习
{{msg}}
Vue.component("my-component",{ data:function(){ return { myOpacity:0 } }, template:`透明度将改变
`, mounted:function(){ setInterval(function(){ this.myOpacity += 0.1; if(this.myOpacity>1){ this.myOpacity = 0; } }.bind(this),1000) } }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } })
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue如何调用mock数据
立即学习“前端免费学习笔记（深入）”；
Vue路由钩子的实战使用教程
Vue.js移动端组件库使用方法
以上就是vue组件生命周期使用方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2772099.html
