所有的生命周期钩子自动绑定this上下文到实例（vue实例）中，因此可以可以通过this访问data，methods中的方法。
beforeCreate
类型： function
描述：在初始化之后，数据观测（data observer）和event/watcher 事件配置之前被调用
created
类型：function
描述：在实例创建完成之后立即调用。在这一步，会进行一下操作：
数据观测(data observer)、属性和方法的运算，watch/event事件回调。但是挂载阶段还没有开始，$el属性目前尚不可用
beforeMount
类型：function
描述：在挂载开始之前被调用：相关的render函数首次被调用
注意：该钩子函数在服务器端渲染期间不被调用
mounted
类型：function
描述：实例被挂载之后调用，这时el被创建的vm.$el替换了。
注意：在mounted钩子函数的时候不会保证所有的子组件也都一起被挂载，如果这个时候你希望整个视图都渲染完毕。你可以如下操作：
mounted:function(){
this.$nextTick(function(){
//任何操作
})
}
注：该钩子在服务器端渲染期间不被调用
beforeUpdated
类型：function
描述:数据更新时调用，发生在虚拟Dom打补丁之前。这里适合在更新之前访问现有Dom。比如手动移除已添加的事件监听器
注：该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行
updated
类型:function
描述：在数据更改后，会导致虚拟Dom重新渲染和打补丁，在这之后会调用该钩子。
注意：在updated的更新后状态下，不会保证所有的子组件也都一起被重绘。所以可以使用nextTick
updated:function(){
this.$nextTick(function(){
//操作
})
}
注：该钩子函数在服务端渲染期间不被调用
activated
类型：function
描述：当你使用keep-live缓存组件的时候才会激活此钩子函数
注：该钩子函数在服务器端渲染期间不被调用
deactivated
类型：function
描述：当你使用keep-live缓存组件的时候才会激活此钩子函数
注：该钩子函数在服务器端渲染期间不被调用
beforeDestory
类型：function
描述：实例销毁之前调用，在这一步的时候，实例仍然完全可用
注：该钩子函数在服务器端渲染期间不被调用
实例一：v-if 渲染销毁
<div id="app">
<button @click = "flag = !flag"> 切换 </button>
<Hello v-if = "flag"></Hello>
</div>
<template id="hello">
<div>
hello
</div>
</template>
Vue.component('Hello',{
template: '#hello',
mounted () {
this.time = setInterval ( () => {
console.log( 'aaaa' )
},1000)
},
beforeDestroy () { //清楚定时器
console.log('beforeDestroy')
clearInterval( this.time )
},
destroyed () {
console.log('destroyed')
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})
实例二：自主销毁
div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div class="hello-box">
<button @click = "clear"> 销毁 </button>
hello
</div>
</template>
Vue.component('Hello',{
template: '#hello',
methods: {
clear () {//点击自动销毁hello组件实例
this.$destroy()
}
},
mounted () {
this.time = setInterval ( () => {
console.log( 'aaaa'' )
},1000)
},
beforeDestroy () {
console.log('beforeDestroy')
clearInterval( this.time ) //清除当前的定时器
document.querySelector('.hello-box').remove()
},
destroyed () {
console.log('destroyed')
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})
destoryed
类型：function
描述：实例销毁后调用，对应vue实例得所有指令都被解绑，所有得事件监听器被移除，所有得子实例也都被销毁
注：该钩子在服务器端渲染期间不被调用
errorCaptured
类型：（err:Eroor,vm:Component,info:string）=>?boolean
描述：当捕获一个来自子孙组件得错误时被调用。此钩子函数会收到三个参数：错误对象/发生错误得组件实例以及一个包含错误来源信息得字符串。当前钩子函数可以返回false来阻止该错误继续向上传播
网友评论