Vue — ライフサイクル (フック関数)

Vueのライフサイクル

各 vue インスタンスの作成から仮想 dom の生成、データ バインディングのモニタリング、データのレンダリングと破棄までのプロセス全体。

vue のライフサイクルには 8 つの段階があります。つまり、 beforeCreate (作成前)、created (作成後)、beforeMount (マウント前)、mounted (マウント後)、beforeUpdate (更新前)、updated (更新後)、beforeDestroy です。 (破壊前)、破壊されました(破壊後)。

各ステージは何をしましたか?

1.beforeCreate(作成前)

インスタンスが初期化される前に、vue インスタンスのデフォルトのライフサイクルの初期化と一部のイベントの初期化が完了しており、この時点ではデータとメソッドにアクセスできません。

2.作成済み(作成後)

インスタンスの初期化が完了すると、Vue のデータ インジェクションとデータ モニタリングの操作が完了し、Vue インスタンスが作成されると、データのデータ モデルとメソッドにアクセスできるようになります。

 3.beforeMount(マウント前)

作成後、vue はインスタンスに el 属性が含まれているかどうかを判断します。手動で vm.$mount(el) を呼び出す必要がない場合は、テンプレート属性が含まれているかどうかを判断します。テンプレート属性があれば、テンプレートはテンプレートとしてコンパイルされない場合は、コンパイルするテンプレートとして el の外側の html を指定します。

<body>
	<div id="app">{
   
   {msg}}</div>
	<script>
		let vm=new Vue({
			// el: '#app',
			data: {
				msg: 'hello Vue'
			},
			template:'<h1>{
   
   {msg}}</h1>',
		});
        // 如果没有el属性,手动调用vm.$mount(模板标签)
		vm.$mount('#app')
	</script>
</body>

4.実装済み(実装後)

インスタンスはページにマウントされますが、このときDOM要素の取得や非同期リクエストの送信も可能です。データ バインディング操作が完了すると、レンダリング関数が実行され、テンプレートが解析され、データが動的にバインドされます。 

5.beforeUpdate(アップデート前)

インスタンスの更新によってトリガーされるライフサイクル。データが更新されたときにビューは更新されておらず、インスタンスはデータに対応するビューを見つけて更新します。  

6.更新(更新)     

インスタンスの更新が完了し、ビューがレンダリングされました。

インスタンスは手動で破棄する必要があります: vm.$destroy()

 7.beforeDestroy(破壊前)

インスタンスが破棄される前でも、現時点ではインスタンス オブジェクトのデータとメソッドにアクセスできます。

8.destroyed(破壊後)

インスタンスは破壊されます。リスナー、サブコンポーネント、イベント リスナーなどの削除が完了し、Strength オブジェクトが破棄されました。テンプレートを再コンパイルしません

ライフサイクルの各段階での実行数:

ライフサイクル作成フェーズ関数(beforeCreate(作成前)/created(作成後))、仮想dom生成フェーズ関数(beforeMount(マウント前)/mounted(マウント後))、破棄フェーズ関数は全体でのみ実行されます。ライフサイクルが 1 回あり、データ更新ステージ関数 (beforeUpdate (更新前)/updated (更新後)) が 0 回以上実行されます。データが変更されない限り、このステージは実行されません。データが変更された場合、変更は何回実行されますか。何回実行しますか。

おすすめ

転載: blog.csdn.net/qq_50748038/article/details/127022692