序文
この章の内容は、VUEライフサイクルと関連する技術的な説明です。
前回の記事アドレス：
Vue 3: Web フロントエンド テクノロジーで遊ぶ (6) - Lion King のブログ - CSDN ブログ
次の記事のアドレス:
Vue 3: Web フロントエンド テクノロジーで遊ぶ (8) - Lion King のブログ - CSDN ブログ
1. ライフサイクル
1. フック機能によるライフサイクルの把握
前の章のコードに基づいて、ライフサイクル フック関数を追加し、App.vue ファイルを次のように変更します。
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">
<span>{
{ item.name }}</span>
<span>{
{ item.age }}</span>
</li>
</ul>
</div>
</template>
<script>
import './mock/apiMock'
import axios from 'axios'
export default {
data() {
return {
// list:[{"id":1, "name":"王婆", "age":100}],
list:[],
}
},
methods: {
fetchData() {
axios.get('/apidata/list')
.then(response => {
this.list=response.data.list
console.log(this.list)
})
.catch(error => {
console.error(error)
})
}},
beforeCreate() {
console.log('beforeCreate');
this.fetchData();
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeUnmount() {
console.log('beforeUnmount');
},
Unmount() {
console.log('Unmount');
},
}
</script>
<style>
</style>
このコードでは、 this.fetchData(); をこれら 8 つのステージに順番に配置し、その効果を確認します。
(1)Createの前に入れてください:
次のエラーが報告され、この時点ではコンポーネント インスタンスが作成されておらず、コンポーネントのメソッドを呼び出すことができないため、`beforeCreate()` フックで `fetchData()` を呼び出すのが正しくないことを示します。
(2) 作成したものを次のように入力します。
作成時はログが出力されるのですが、マウントが完了するまで出力されないのはなぜでしょうか？これは Vue コンポーネント内にある可能性があり、作成されたフック関数は Vue インスタンスの作成直後に呼び出されます。マウントされたフック関数は、Vue インスタンスが DOM にマウントされた後に呼び出されます。次の図に示すように、マウントされたサイクルの実行後に this.fetchData() ログが出力されます。これは、マウントされたフック関数が DOM のマウント後に呼び出され、fetchData 関数には DOM 操作が含まれたり、非同期操作が含まれる場合があるためです。 。
(3)Mountの前に置きます:
(2)と同じ。
(4) 取り付けた状態で置きます。
これは正しく呼び出すことができ、このサイクルの下に配置する必要があることを示します。
(5) beforeUpdate に入れます。
以下に示すように、直接実行しないでください。
（6）更新日：
(5)と同じ
（7）アンマウント前：
(5)と同じ
（8）アンマウント：
(5)と同じ
2. 関連する技術的な議論
1. 組み合わせAPIとオプションAPI
公式説明:概要 | Vue.js
要約すると、オプションの API は結合された API に基づいて実装されており、提供されるインターフェイスのスタイルが異なるだけです。
2. VUE のライフサイクルとは何ですか?
公式説明:ライフサイクル フック | Vue.js
次の図に示すように、ライフサイクル フックの位置は矢印でマークされています。
オプション API を例に挙げると、Vue のライフ サイクル フック機能には主に次の 8 つのステージが含まれています (8 つ以上の機能については、詳細については公式の説明を参照してください: ライフ サイクル オプション | Vue.js )。
(1) beforeCreate: コンポーネントのインスタンスが作成されたばかりですが、データとメソッドは初期化されていません。
(2) created: コンポーネントインスタンスが作成され、データとメソッドが初期化されています。一部のデータの初期化を行うことができます。
(3) beforeMount: コンポーネントが DOM にマウントされる前に呼び出されます。この時点で、テンプレートはレンダリング関数にコンパイルされます。
(4) マウント済み: コンポーネントが DOM にマウントされた後に呼び出されます。DOM操作などが行えます。
(5) beforeUpdate: コンポーネントが更新される前、仮想 DOM が再レンダリングされてパッチが適用される前に呼び出されます。
(6) updated: コンポーネントが更新された後に呼び出されます。DOM操作などが行えます。
(7) beforeUnmount: コンポーネント インスタンスが破棄される前に呼び出されます。タイマーのキャンセル、イベント監視のキャンセルなど、一部のクリーニング作業を実行できます。
(8) unmounted: コンポーネント インスタンスが破棄された後に呼び出されます。
これらのライフサイクル フック関数は Vue コンポーネントで使用でき、特定のコード ロジックをフック関数で実行して、データの処理やさまざまな段階での操作の実行に役立てることができます。
3. ライフサイクルオプションとライフサイクルフック
Vue では、ライフサイクル オプションはライフサイクル フックに基づくラッパーです。公式がライフサイクルを記述する場合、組み合わせたAPIのライフサイクルフックのフック関数ではなく、オプション API のライフサイクルオプションに対応するフック関数で直接表現しており、これも間接的にライフサイクルであることを示しています。サイクルフックはどちらかというと下層向けです。ただし、この表現だと少しわかりにくく、ライフサイクルフックとライフサイクルオプションのフック関数が同じものなのか分かりにくくなります。前回の分析の結果、ライフ サイクル オプションとライフ サイクル フックは単なる異なる API スタイルであり、オプションのフック関数はライフ サイクル フック関数のカプセル化であると結論付けました。
4. DOM という用語の理解
DOM (Document Object Model) は、HTML、XML、および XHTML ドキュメントを表現および操作するためにブラウザで使用されるプログラミング インターフェイスです。ドキュメントをノードとオブジェクト (要素、属性、テキストなどを含む) で構成されるツリー構造に解析し、このツリー構造にアクセス、変更、操作するためのメソッドとプロパティのセットを提供します。
DOM のツリー構造は、ノード (Node) と関係 (Relationship) で構成されます。ノードはドキュメント内の要素、属性、テキストなどを表し、親子ノード、兄弟ノードなどのノード間の関係を通じてアクセスおよび操作できます。
DOM は、ドキュメントを処理するためのいくつかの一般的なメソッドとプロパティを提供します。次に例を示します。
- getElementById(): 要素の id 属性を通じて、対応する要素ノードを取得します。
- getElementsByTagName(): 要素のタグ名によって要素ノードのセットを取得します。
- innerHTML: 要素ノードのコンテンツを取得または設定します。
- appendChild(): 要素ノードの末尾に新しい子ノードを挿入します。
DOM を使用すると、新しい要素の作成、既存の要素の削除または移動、要素のスタイルや属性の変更など、ドキュメントのコンテンツを動的に操作できます。これにより、JavaScript または他のプログラミング言語を使用して Web ページの構造とスタイルを操作し、動的なインタラクティブな効果とユーザー エクスペリエンスを実現できるようになります。