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>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 大数据培训之Fsimage和Edits解析
下一篇: Java培训之创建MavenWeb工程的完美方式
