vueフレームワーク学習（3）-ライフサイクル

1.MVVMとは

MVVMはModel-View-ViewModelの略語であり、次のようにフレームワークに反映されます:(画像はインターネット上にあります）
ここに画像の説明を挿入
次のようにコード書き込み位置に反映されます：

MVVMはそれらの1つですView 的状态和行为抽象化、视图 UI 和业务逻辑分離しましょう。もちろん、ViewModelはすでにこれらのことを行っていますが、それは可能取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑ですがMVVM主要目的是分离视图（View）和模型（Model），然后减低耦合，提高可重用性、開発をビジネス処理に集中させると、インターフェイスの表示はほんの一部にすぎません。

2つ目は、Vueインスタンスを作成する

オブジェクト指向プログラミングを学んだことがあれば、オブジェクトの作成であるこの例に非常に精通しています。新しいキーワードを使用したVueについても同じことが言えます。すべてのVueアプリケーションは、Vue関数を使用して新しいVueインスタンスを作成することから始まります。

var vm = new Vue({
  // 选项
})

3、Vueのオプション

3.1オプションとは

ここに画像の説明を挿入
Vueインスタンスを作成する場合、オブジェクトまたはパラメーターをインスタンスに渡すことができますが、
このパラメーターのオブジェクトは公式Webサイトに作成されます。このオブジェクトを（{object value：option}）に配置します。

	const app = new Vue({
			el: "#app1",
			data: {
				message: "hello vue"
			}
		})

より明確になるように、このオブジェクトを出力しました。実際、これはパラメーターの受け渡しobjですが、パラメーターの受け渡しオブジェクトには、自分で選択できる多くの値があります。对象里的值就是Vue的选项

var obj = {
			el: "#app1",
			data: {
				message: "hello vue"
				}
			}
const app = new Vue(obj)

3.2オプションの値は何ですか

公式ウェブサイトでオプションAPIを見ることができます。オプション値は非常に多いので、覚える必要はなく、覚えることもできません。よく使用されるものをいくつか覚えておく必要があります。。。

#el
タイプ：文字列要素の
制限：只在用 new 创建实例时生效 。

#data
タイプ：オブジェクト関数の
制限：コンポーネントの定義只接受 function。

#methods
タイプ：{[キー：文字列]：関数}
詳細：メソッドはVueインスタンスに混合されます。VM 实例これらのメソッド、またはthisVueインスタンスに自動的にバインドする式メソッドで使用される命令に直接アクセスできます。

#生命周期钩子
かかり数：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured

4、Vueのライフサイクル

4.1ライフサイクル図

ヴューのライフサイクルが最初から開始し创建、初始化データ、编译テンプレート、挂载ドム渲染→ 更新→ 渲染→ 销毁（インターネット上で見つけた画像）
ここに画像の説明を挿入

4.2ライフサイクルフック機能

針	説明
beforeCreate	インスタンスが初期化された後、データ監視およびイベント/ウォッチャー時間の構成の前に呼び出されます。現時点では、この変数は使用できません。データの下のデータ、メソッドの下のメソッド、およびウォッチャーのイベントは取得できません。`console.log(this.page); // undefined`
作成した	インスタンスが作成された後に呼び出されます。このステップで、インスタンスは次の構成を完了しました：データ監視、属性およびメソッド計算の監視/イベントイベントコールバック。ただし、マウントフェーズはまだ開始されておらず、$ el属性は現在表示されていません。現時点では、vueインスタンスのデータとさまざまなメソッドを操作できますが、「dom」ノードはまだ操作できません。 `let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点，打印不出来button的值`
beforeMount
マウント	この時点で、マウントが完了し、この時点でdomノードがドキュメントにレンダリングされます。この時点で、domを必要とする一部の操作を正常に実行できます。注：mountedは、インスタンス全体のライフサイクルで1回だけ実行されます。 `let btn = document.querySelector('button')console.log(btn.innerText) //此时找不到button节点，打印不出来button的值`
beforeUpdate	データ更新前の操作
更新しました	データの変更により、仮想DOMが再レンダリングされ、パッチが適用されます。その後、フックが呼び出されます。このフックが呼び出されると、コンポーネントDOMが更新されたため、DOMに依存する操作を実行できるようになりました。ただし、ほとんどの場合、この期間中に状態を変更することは避けてください。これにより、更新のループが無限に発生する可能性があります。
有効化	キープアライブコンポーネントがアクティブ化されたときに呼び出されます。このフックは、サーバー側のレンダリング中には呼び出されません。
非アクティブ化	キープアライブコンポーネントが無効になっているときに呼び出されます。このフックは、サーバー側のレンダリング中には呼び出されません。
beforeDestroy	よく見られるように、Vueインスタンスが破棄される前です。「このインターフェイスを終了してもよろしいですか？」
破壊されました	Vueインスタンスが破棄された後に呼び出されます。呼び出し後、Vueインスタンスによって示されるすべてがバインド解除され、すべてのイベントリスナーが削除され、すべての子インスタンスが破棄されます。

キープアライブ：キープアライブの
概念
は、Vueの組み込みコンポーネントであり、動的コンポーネントをラップするときに、非アクティブなコンポーネントインスタンスを破棄するのではなく、キャッシュします。遷移と同様に、keep-aliveは抽象的なコンポーネントです。それ自体をDOM要素としてレンダリングしたり、親コンポーネントチェーンに表示したりすることはありません。
これは
、コンポーネントの切り替え中にメモリ内の状態を維持し、DOMの繰り返しレンダリングを防ぎ、読み込み時間とパフォーマンスの消費を削減し、ユーザーエクスペリエンスを向上させるために使用されます。

記事のメモはhttps://blog.csdn.net/qq_30442207/article/details/108266756を参照してください