What is the life cycle
Vue instances have a complete life cycle, that is, from the beginning, create, initialize data, compile templates, Mount Dom
A series of processes, such as rendering → updating → rendering and destruction, are called Vue's life cycle. Generally speaking, Vue instances are created from scratch
The process from construction to destruction is the life cycle.
Eight life cycles of vue
1. Before beforecreate
After the instance and component are created through new Vue(), the event and life cycle will be initialized, and then the beforeCreate hook function will be executed. At this time, the data has not been mounted. It is just an empty shell and cannot access the data and real dom. Generally, no operation is performed
2.created after creation
Mount data, bind events, etc., and then execute the created function to access data, but not DOM
3.beforeMount before mounting
DOM has been created and will be rendered soon. You can also change the data here without triggering updated. Access to data and DOM
But the DOM has not been rendered yet
4. After mounted
Components have appeared on the page, data and real DOM have been processed, and events have been mounted. You can operate real DOM and other things here. You can access data and DOM, which has been rendered
5. beforeUpdate update before rendering
vue's virtual DOM mechanism will rebuild the virtual DOM, compare it with the previous virtual DOM tree and render it again using diff algorithm. Generally, nothing is done to access the data and DOM, and the DOM has been rendered
6.updated rendering completed
When the update is completed, execute updated. The data has been changed and the DOM is re render ed. You can operate the updated virtual dom
7. Before destruction
Generally, we do some aftercare work here, such as clearing timers, clearing non instruction bound events, and so on
8. After destroyed
After the data binding and listening of components are removed, only the dom shell is left
<div id="app" ref="app"> {{name}} </div> <script type="text/javascript"> let vm = new Vue({ el:"#app", data:{ name:"VUE development" }, //01 before the creation, the data has not been mounted. It is just an empty shell, unable to access the "data" and the real "DOM" /* beforeCreate(){ console.log("About to create ""); console.log(this.$data); console.log(this.$el) }, */ //02 get initialization data after creation, unable to render DOM /* created(){ console.log("Finished creating ""); console.log(this.$data); console.log(this.$el) }, */ //03 about to mount /* beforeMount(){ console.log("About to mount ""); console.log(this.$data); console.log(this.$el) }, */ //04 mount completed /* mounted(){ //Data, DOM rendered console.log("About to mount ""); console.log(this.$data); console.log(this.$el) }, */ //05 update before rendering /* beforeUpdate(){ //The function beforeUpdate() is triggered after vm.$data.name = "new value" is entered in the console console.log("About to update rendering ''); let name = this.$refs.app.innerHTML; console.log("name:" + name) }, */ //06 after updating rendering /* updated(){ //After rendering, the data in data has been replaced by the updated value console.log("Update (render complete) "; let name = this.$refs.app.innerHTML; console.log("name:" + name) }, */ // 07 before destruction //The following two cannot be printed on the console. You can print them after executing vm.$destroy() beforeDestroy(){ console.log("before destroy Before destruction"); console.log("data:" + this.$data); console.log("dom:" + this.$el); console.log("------------"); }, //08 after destruction destroyed(){ console.log("destroyed Destruction complete"); console.log("data:" + this.$data); console.log("dom:" + this.$el); console.log("------------");· } }) console.log("vue Printout outside the instance"+vm.$data) </script>