beforeCreate
After instance initialization, data observer and event/watcher event configurations are invoked.
created
Called immediately after instance creation is complete.In this step, the instance has completed the following configurations: data observer, operation of attributes and methods, and watch/event callback.However, the mount phase has not yet started and the $el property is not currently visible.
beforeMount
Called before the mount starts: The related render function is called for the first time.The hook is not called during server-side rendering.
mounted
El is replaced by the newly created vm.el, mounted on the instance, and then called the hook.If the root instance mounts an element in the document, vm.el is replaced when mounted is called, and the hook is called after mounting onto the instance.If the root instance mounts an element in the document, vm.el is also in the document when mounted is called.Note that mounted does not promise that all subcomponents will be mounted together.If you want to wait until the entire view is rendered, replace mounted with vm.$nextTick: the hook is not called during server-side rendering.
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}beforeUpdate
Called when data is updated, before the virtual DOM is patched.This is a good place to access existing DOMs before updating, such as manually removing the added event listeners.The hook is not called during server-side rendering because only initial rendering occurs on the server-side.
updated
The hook is called after the virtual DOM is rendered and patched as a result of data changes.
The component DOM was updated when this hook was called, so you can now perform DOM-dependent operations.In most cases, however, you should avoid changing state during this period.If you want to change the state accordingly, it is usually best to use a computed attribute or watcher instead.
Note that updated does not promise that all subcomponents will be redrawn together.If you want to wait until the entire view is redrawn, replace updated with vm.$nextTick:
The hook is not called during server-side rendering.
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}activated
Called when the keep-alive component is activated.The hook is not called during server-side rendering.
deactivated
Called when the keep-alive component is deactivated.The hook is not called during server-side rendering.
beforeDestroy
Called before the instance is destroyed.At this stage, the instance is still fully available.The hook is not called during server-side rendering.
destroyed
Called after the Vue instance is destroyed.After invocation, everything indicated by the Vue instance is unbound, all event listeners are removed, and all child instances are destroyed.The hook is not called during server-side rendering.
errorCaptured
Type: (err: Error, vm: Component, info: string) =>? Boolean
Called when an error is caught from a descendant component.The hook receives three parameters: the error object, the component instance where the error occurred, and a string containing information about the source of the error.This hook can return false to prevent the error from continuing to propagate upwards.
You can modify the state of the component in this hook.Therefore, it is important to set short-circuit conditions for other content in a template or rendering function to prevent the component from entering an infinite rendering cycle when an error is caught.
Error Propagation Rules
1. By default, if the global config.errorHandler is defined, all errors will still be sent to it, so they will still be reported to a single analysis service.
1. If there are multiple errorCaptured hooks in a component's inheritance or parent dependent link, they will be waked up one by one by the same error.
1. If this errorCaptured hook throws an error by itself, both the new error and the error that was originally caught will be sent to the global config.errorHandler.
1. An errorCaptured hook can return false to prevent the error from continuing to propagate upward.Essentially, this error has been fixed and should be ignored.It will prevent any other errorCaptured hooks and global config.errorHandler that will be invoked by this error.
//Use examples
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.component('component-one',{
template:'<h1>Shows Component One</h1>',
activated: function () {
console.log('component-one activated begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('component-one activated end')
},
deactivated: function () {
console.log('component-one deactivated begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('component-one deactivated end')
},
beforeDestroy: function () {
console.log('component-one beforeDestroy begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('component-one beforeDestroy end')
},
destroyed: function () {
console.log('component-one destroyed begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('component-one destroyed end')
}
})
Vue.component('component-two',{
template:'<h1>Shows Component Two</h1>',
activated: function () {
console.log('component-two activated begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('component-two activated end')
},
deactivated: function () {
console.log('component-two deactivated begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('component-two deactivated end')
},
beforeDestroy: function () {
console.log('component-two beforeDestroy begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('component-two beforeDestroy end')
},
destroyed: function () {
console.log('component-two destroyed begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('component-two destroyed end')
},
})
new Vue({
el:'#app',
template:`
<div>
<button v-on:click="buttonClick">Click on me</button>
<h1>{{counter}}</h1>
<keep-alive>
<component :is="view"></component>
</keep-alive>
<component-one v-if="counter % 3 == 0"></component-one>
<component-two v-else></component-two>
</div>
`,
methods:{
buttonClick: function () {
this.counter += 1
this.view = (this.view == 'component-one'?'component-two':'component-one')
}
},
data:function () {
return {
counter:0,
view:'component-one'
}
},
beforeCreate: function () {
console.log('beforeCreate begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('beforeCreate end')
},
created: function () {
console.log('created begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('created end')
},
beforeMount: function () {
console.log('beforeMount begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('beforeMount end')
},
mounted: function () {
console.log('mounted begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('mounted end')
},
beforeUpdate: function () {
console.log('beforeUpdate begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('beforeUpdate end')
},
updated: function () {
console.log('updated begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('updated end')
},
errorCaptured: function () {
console.log('errorCaptured begin')
console.log(this.$data.counter)
console.log(this.$el)
console.log('errorCaptured end')
}
})