前端培训之 vue 生命周期分析

发布时间:2019年09月26日作者:atguigu浏览次数:661

 vue 生命周期分析
1) 初始化显示 *beforeCreate() *created() *beforeMount() *mounted() 2) 更新状态:this.xxx=value *beforeUpdate() *updated() 3) 销毁 vue 实例:vm.$destory() *beforeDestory() *destoryed()
常用的生命周期方法
1) created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务 2) beforeDestory(): 做收尾工作, 如: 清除定时器
编码
<div> <button @click=”destoryVue”>destory vue</button> <p v-show=”isShowing”>{{msg}}</p> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> var vue = new Vue({ el: ‘div’, data: { msg: ‘尚硅谷 IT 教育’, isShowing: true, persons: [] }, beforeCreate () { console.log(‘beforeCreate() msg=’ + this.msg)
}, created () { console.log(‘created() msg=’+this.msg)
this.intervalId = setInterval(() => { console.log(‘—–‘) this.isShowing = !this.isShowing }, 1000) },
beforeMount () { console.log(‘beforeMount() msg=’+this.msg) }, mounted () { console.log(‘mounted() msg=’+this.msg) },
beforeUpdate() { console.log(‘beforeUpdate isShowing=’+this.isShowing) }, updated () { console.log(‘updated isShowing=’+this.isShowing) },
beforeDestroy () { console.log(‘beforeDestroy() msg=’+this.msg) clearInterval(this.intervalId) },
destroyed () { console.log(‘destroyed() msg=’+this.msg) },
methods: { destoryVue () { vue.$destroy() } } }) </script>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)