vue3 changed several life cycle functions

vue3 has changed 4 life cycle functions. The Vue3 combined API cancels the beforeCreated and created hook functions and uses the step hook instead, and this cannot be used in it. The hook functions for component destruction in Vue3 have been changed from destroyed and beforeDestroy to beforeUnmount and unmounted.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Vue instances have a complete life cycle, that is, from new Vue(), initialization event (.once event) and life cycle, compiling template, mounting Dom -> rendering, update- > A series of processes such as rendering and unloading are called the life cycle of Vue.

There are 4 main events (8 hooks) in the vue application:

Creation----Executed when the component is created
Mount----DOM Executed when mounted
Update ---- Executed when the response data is modified
Destruction ---- Executed immediately before the element is destroyed

Vue2 life cycle

##(1) beforeCreate(before creation)

Data monitoring (getters and setters) and initialization events have not yet started. At this time, the responsive tracking of data and

event/watcher have not been set up

Cannot access methods and data on data, computed, watch, methods.

(2) created (after creation)

After creation is completed Will automatically execute the function

(3) beforeMount (before mounting)

is called before the mounting starts. , the related render function is called for the first time.

This time Vue starts to parse the template, generate a virtual DOM and store it in the memory. It has not yet converted the virtual DOM into a real DOM and inserted it into the page

(4) mounted (after mounting)

Called after el is replaced by the newly created vm.$el (which is a copy of the real DOM) and mounted to the instance (the memory is The virtual DOM is converted into a real DOM, and the real DOM is inserted into the page).

Generally performed at this stage: start the timer, send network requests, subscribe to messages, bind custom events, etc.

(5)beforeUpdate(before update)

响应式数据更新时调用，此时虽然响应式数据更新，但是对应的真实 DOM 

还没有被渲染（数据是新的，但页面是旧的，页面和数据没保持同步呢）。

(6)updated(after update)

Due to data changes Called after the virtual DOM is re-rendered and patched.

When called, the component DOM has been updated, so operations that depend on the DOM can be performed. In most cases, however, changing state during this period should be avoided as this may result in an infinite loop of updates

(7) beforeDestroy (before destruction)

Call before instance destruction

At this stage, the timer is generally closed, the message is unsubscribed, and the custom event is unbound.

(8) destroyed (after destruction)

Called after the instance is destroyed. After the call, everything indicated by the Vue instance will be Unbinding, all event listeners will be removed, and all child instances will be destroyed. This hook is not called during server-side rendering.

nbsp;html>
	
		<meta>
		<title>分析生命周期</title>
		<!-- 引入Vue -->
		<script></script>
	
	
		<!-- 准备好一个容器-->
		<div>
			<h2></h2>
			<h2 id="当前的n值是-n">当前的n值是：{{n}}</h2>
			<button>点我n+1</button>
			<button>点我销毁vm</button>
		</div>
	

	<script>
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:&#39;#root&#39;,
			// template:`
			// 	<div>
			// 		<h2>当前的n值是：{{n}}
			// 		<button @click="add">点我n+1
			// 	
			// `,
			data:{n:1},
			methods: {
				add(){
					console.log(&#39;add&#39;)
					this.n++
				},
				bye(){
					console.log(&#39;bye&#39;)
					this.$destroy()
				}
			},
			watch:{
				n(){
					console.log(&#39;n变了&#39;)
				}
			},
			beforeCreate() {
				console.log(&#39;beforeCreate&#39;)
			},
			created() {
				console.log(&#39;created&#39;)
			},
			beforeMount() {
				console.log(&#39;beforeMount&#39;)
			},
			mounted() {
				console.log(&#39;mounted&#39;)
			},
			beforeUpdate() {
				console.log(&#39;beforeUpdate&#39;)
			},
			updated() {
				console.log(&#39;updated&#39;)
			},
			beforeDestroy() {
				console.log(&#39;beforeDestroy&#39;)
			},
			destroyed() {
				console.log(&#39;destroyed&#39;)
			},
		})
	</script>

Commonly used life cycle hooks:

1.mounted: Send ajax requests, start timers, bind custom events, subscribe to messages, etc. [Initialization operations].
2.beforeDestroy: Clear timers, unbind custom events, unsubscribe messages, etc. [Finishing work]
About destroying Vue instances:
(1) After destruction, you can’t see anything with the help of Vue developer tools information.
(2) Custom events will become invalid after destruction, but native DOM events are still valid.
(3) Generally, data will not be manipulated in beforeDestroy, because even if the data is manipulated, the update process will not be triggered again.

Vue3 life cycle

##(1) onBeforeMount

is called before mounting, and the rendering function render is called for the first time

(2) onMounted

Called when the component is mounted

(3) onBeforeUpdate

Called when the data is updated, which occurs before the virtual DOM is patched.

(4) onUpdated

Called when the virtual DOM is re-rendered and patched due to data changes

(5) onBeforeUnmount

Called before uninstalling the component instance, the instance at this stage is still normal.

(6) onUnmounted

Called after unmounting the component instance. When this hook is called, all instructions of the component instance are unbound, all event listeners are removed, and all child component instances are unloaded.

---

##The difference between vue2 and vue3 in the life cycle

vue2vue3beforeCreatesetup() Before starting to create a component, data and method are created createdsetup()beforeMountonBeforeMount Executed before the component is mounted on the node The function. mountedonMounted Function executed after component mounting is completed beforeUpdateonBeforeUpdate component update function previously executed. updatedonUpdated Function executed after component update is completed. beforeDestroyonBeforeUnmount Function executed before the component is mounted on the node. destroyedonUnmounted Function executed before the component is unmounted.

Summary:

1. The Vue3 combined api cancels the beforeCreated and created hook functions, and uses the stem hook instead and cannot be used in it. Use this

2. The hook function for component destruction in Vue3 is replaced by beforeUnmount and unmounted. The previous one was destroyed and beforeDestroy. However, it should be noted that if Vue3 uses the selective writing method of Vue2, the previous hook function can still be used.

3. The combined api life cycle function of Vue3 has more prefixes than the life cycle of Vue2 selective api, and it needs to be imported separately.

Related recommendations:

vue.js video tutorial

The above is the detailed content of vue3 changed several life cycle functions. For more information, please follow other related articles on the PHP Chinese website!