This year is the year had nervous epidemic raging, we dwelling is to contribute to the country it ...
Since I can not go out, and that only turn on the computer, I learn so happy ... / (¨Ò o ¨Ò) / ~ ~
Recently foreground are learning framework vue, learn while notes, and also share with you
Lifecycle think this one is still very important, but for me personally it is quite easy to overlook, to be a note-bit, hehe
The following figure shows an example of the life cycle:
vue life cycle in three stages: initialization display, update the display, death;
Initialization phase display can be divided into four smaller stages: beforCreate, created, beforeMount, mounted (mounting: calls immediately after initialization display)
Update the display stage is also divided into two small phases: beforeUpdate, updated
Death phase is also divided into two small phases: beforeDestory, destoryed
Each stage of life corresponds to the appropriate callback function, you can call the hook Functions;
1) initialize the display
* beforeCreate()
* created()
* beforeMount()
* mounted()
2) Update Status: this.xxx = value
* beforeUpdate()
* updated()
3) Destruction vue instance:. Vm $ destory ()
* beforeDestory()
* destoryed
Creating an anonymous function with an arrow when creating a function vue =>, will be built this, if there is no internal calls outside of this, outside of this target is vm
Commonly used life-cycle approach
1) created () / mounted (): ajax request sending, starts a timer and other asynchronous tasks
2) beforeDestory (): do finishing work, such as: set clear
Coding examples:
<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: '明明在学JAVA',
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>
