vue学习笔记--day2
栏目: JavaScript · 发布时间: 6年前
内容简介：本篇文章重点讲述vue组件的生命周期，主要形式是通过实例说明组件由创造到结束的过程。生命周期的主要方法就是这些（详细的讲解请参考下面我们就用例子将整个流程走一遍：
本篇文章重点讲述vue组件的生命周期，主要形式是通过实例说明组件由创造到结束的过程。
vue组件周期
- beforeCreate
- created
- beforeMounte
- mounted
- beforeUpdate
- Updated
- beforeDestory
- destoryed
生命周期的主要方法就是这些（详细的讲解请参考 这篇文章 ），我们常用的是mounted和beforeDestory这两个方法，mounted方法是指组件的初始化工作都已经完成了，运行到这个阶段，就可以获取到this中的数据和方法，并且可以对dom进行操作，我们通常是在该方法中进行ajax请求，定时器及其他的异步操作；而在beforeDestory阶段，如果有定时器，我们会在这个方法中取消定时器。
下面我们就用例子将整个流程走一遍：
<body>
<div id="app">
<button @click="stop">停止闪烁</button>
<p v-show="isshow">生命周期练习</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isshow: true,
interval: null
},
beforeCreate(){
//在这个阶段的特点是组件中的数据和方法获取不到
console.log('beforeCreate')
console.log(this.isshow)
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted'）
this.interval = setInterval(()=>{
this.isshow = !this.isshow
},1000)
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
},
beforeDestroy(){
console.log('beforeDestroy')
clearInterval(this.interval)
},
destroyed(){
console.log('destroyed')
},
methods: {
stop(){
this.$destroy()
}
}
})
</script>
</body>
该例子想展示的效果是，文本内容每隔1s闪现一次，点击上方按钮可停止闪烁，在控制台中会将组件从创建到销毁整个过程打印出来。
根据上面的例子，我们可以知道，在vue的生命周期中，只有与组件更新有关的方法会执行多次，创建方法，挂载方法以及卸载方法都是只会执行一次。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 【每日笔记】【Go学习笔记】2019-01-04 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-02 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-07 Codis笔记
- Golang学习笔记-调度器学习
- Vue学习笔记（二）------axios学习
- 算法/NLP/深度学习/机器学习面试笔记
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
程序设计语言理论基础
米切尔 / 电子工业出版社 / 2006-11 / 68.00元
本书提出了一个框架，用于分析程序设计语言的语法、操作和语义性质，该框架基于称为类型化λ演算的数学系统。λ演算的主要特色是对于函数和其他可计算的值的一种记法，以及一个等式逻辑和用于表达式求值的一组规则。本书中最简单的系统是称为泛代数的一个等式系统，它可以用来公理化和分析通常用于程序设计的许多数据类型。可作为理论计算机科学、软件系统和数学专业的大学本科高年级或者研究生初始学习阶段的教材，同时也适合用于......一起来看看 《程序设计语言理论基础》 这本书的介绍吧!
