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>