发布时间：2025-12-10 23:54:51 浏览次数：11
具体如下:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Vue的生命周期</title><scripttype="text/javascript"src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head><body><h2>Vue的生命周期</h2><hr><pid="app">{{count}}<p><button@click="add">Add</button></p></p><buttonοnclick="app.$destroy()">销毁</button></body></html><script>varapp=newVue({el:'#app',data:{count:1},methods:{add:function(){this.count++}},//有这么多钩子函数一共十个//初始化之后beforeCreate:function(){console.log('1-beforeCreate初始化之后');},//创建完成created:function(){console.log('2-created创建完成');},//挂载之前beforeMount:function(){console.log('3-beforeMount挂载之前');},//被创建mounted:function(){console.log('4-mounted被创建');},//数据更新前beforeUpdate:function(){console.log('5-beforeUpdate数据更新前');},//被更新后updated:function(){console.log('6-updated被更新后');},//activated:function(){console.log('7-activated');},//deactivated:function(){console.log('8-deactivated');},//销毁之前beforeDestroy:function(){console.log('9-beforeDestroy销毁之前');},//销毁之后destroyed:function(){console.log('10-destroyed销毁之后')}})</script>运行结果:
上述内容就是Vue的生命周期有哪些,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注本站行业资讯频道。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流