Vue知識点

1.Vueのライフサイクル理解
Vueのライフサイクルは、作成前/後、ロード前/後、更新前/後、破棄前/後の8段階に分かれています.

の作成前後:beforeCreateフェーズでは、vueインスタンスのマウント要素$elとデータオブジェクトdataはともにunderfinedであり、まだ初期化されている.createdフェーズでは、vueインスタンスオブジェクトdataの作成が完了し、$elはまだ完了していない.

ロード前後:beforeMountフェーズでは、vueインスタンスの$elも初期化が完了したが、マウント前は仮想のDOMノードであり、data.messageはまだ置き換えられていない.mountedフェーズでは、vueインスタンスのマウントが完了し、dataも正常にレンダリングされた.

更新前後:dataが変化すると、beforeUpdateおよびupdatedメソッドがトリガーされます.

破棄前後:destoryメソッドが実行された後、dataの変化はトリガ周期関数ではなく、このvue例がイベント傍受とdomのバインドを解除したことを示しているが、dom構造は依然として存在する.簡単に言えば、Vueインスタンスの作成から破棄までのプロセスは、ライフサイクルです.つまり、データの作成、初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、アンインストールなどの一連のプロセスから、Vueのライフサイクルと呼ばれています.

2.親子構成部品、非親子構成部品の参照
親コンポーネントは、バインド要素のプロパティを介してサブコンポーネントにパラメータを渡します.

//    
<template>
	<div>
		<h1 v-bind:title="msg"></h1>
	</div>
</template>
<script>
exprot default {
	data(){
		return{
			msg: "hello"
		}
	}
}
</script>

//    
<template>
	<div>
		<p>{{ title }}</p>
	</div>
</template>
<script>
exprot default {
	props: ['title']
}
</script>

子コンポーネントが親コンポーネントにパラメータを渡す(イベントを介して)

//    
<template>
	<div>
		<child @title="receive">{{ msg }}</child>
	</div>
</template>
<script>
exprot default {
	data(){
		return{
			msg: "hello"
		}
	},
	methods:{
		receive(title){
			this.msg = title
		}
	}
}
</script>

//    
<template>
	<div>
		<h1></h1>
	</div>
</template>
<script>
exprot default {
	mounted(){
		this.$emit('title', 'hello')
	}
}
</script>

非親子コンポーネントパラメータは、中央イベントバスを介して伝達され、複雑なvuexを使用することができます.

var bus = new Vue()

Vue.component('Another', {
	template: '
This is Another Content 
',
	methods: {
		emit() {
			bus.$emit('anotherclick', 'hello')
		}
	}

})
	
Vue.component('App', {
	template: '
This is App Content {{ info }}
',
	created() {
		bus.$on('anotherclick', (data) => {
			this.info = data;
		}
	)},
	data: () => {return {info: ''}}
})

3.vue双方向データバインドの原理
vueは、パブリッシャ-サブスクライバとデータハイジャックを組み合わせた方法で、vueインスタンスのdataオプションに通常のオブジェクトを渡すと、vueはこのオブジェクト上のすべての属性を遍歴し、Objectを使用します.definePeopertyはこれらの属性をすべてgetter/setterに変換します.これらのgetter/setterはユーザには見えませんが、内部ではVueに依存を追跡させ、属性がアクセスされ、変更されたときに変化を通知します.各コンポーネントインスタンスには対応するwatcherインスタンスオブジェクトがあり、コンポーネントレンダリング中にプロパティが依存として記録され、依存項目のsetterが呼び出されるとwatcherに再計算を通知し、関連するコンポーネントが更新されます.具体的なステップ:第1ステップ:observeが必要なデータオブジェクトを再帰的に遍歴し、サブプロパティオブジェクトのプロパティを含め、setterとgetterを加えると、そのオブジェクトの値に値を割り当てるとsetterがトリガーされ、データ変化第2ステップ:compile解析テンプレート命令を傍受し、テンプレート内の変数をデータに置き換え、次に、レンダリングページビューを初期化し、各コマンドに対応するノードを更新関数にバインドし、傍受データの購読者を追加します.データが変更されると、通知を受け取り、ビューを更新します.第3歩:Watcher購読者はObserverとCompileの間の通信の橋渡しです.主なことは:1、自分がインスタンス化されたときに属性購読器(dep)に自分を追加することです.自身にupdate()メソッド3、属性変動dep.notice()通知が必要な場合、自身のupdate()メソッドを呼び出し、Compileでバインドされたコールバックをトリガーすると、機能が後退します.ステップ4:MVVMはデータバインドの入口として、Observer、Compile、Watcherの3つを統合し、Observerを通じて自分のmodelデータの変化を傍受し、Compileを通じてコンパイルテンプレート命令を解析し、最終的にWatcherを利用してObserverとCompileの間の通信ブリッジを構築し、データの変化->ビューの更新に達する.ビューインタラクティブ変化(input)->データモデル変更の双方向バインド効果.
4.vueコンポーネントをカプセル化するプロセス
まず、コンポーネントはプロジェクト全体の開発効率を向上させることができます.ページを複数の相対的に独立したモジュールに抽象化することができ、従来のプロジェクト開発:効率が低く、メンテナンスが難しく、多重性などの問題を解決しました.そして、Vueを使用する.extendメソッドはコンポーネントを作成し、Vueを使用します.コンポーネントメソッドはコンポーネントを登録します.サブコンポーネントにはpropsで定義を受け入れるデータが必要です.サブコンポーネントがデータを修正したら、親コンポーネントにデータを渡したいです.emitメソッドを使用できます.
5.あなたはVueに.jsのtemplateコンパイルの理解?
簡単に言えば、まずASTツリーに変換し、得られたrender関数はVNode(Vueの仮想DOMノード)を返す詳細ステップ:まず、compileコンパイラによってtemplateをAST構文ツリー(abstract syntax treeすなわちソースコードの抽象構文構造のツリー表現形式)にコンパイルし、compileはcreateCompilerの戻り値である.createCompilerはコンパイラを作成するために使用されます.またcompileはoptionの合併も担当している.その後、ASTはgenerate(AST構文ツリーをrender funtion文字列に変換するプロセス)を経てrender関数を得、renderの戻り値はVNode、VNodeはVueの仮想DOMノードであり、中に(ラベル名、サブノード、テキストなど)がある.
6.完全なカスタムコンポーネント
第一点、共通の第二点、コードはできるだけ第三点を簡潔にすることができて、第四点を修正しやすくて、機能は少し多いです
7.vuexのいくつかの属性の紹介
State:vuexは共有データを管理する倉庫で、倉庫には多くのデータがあります.ここでstateはデータの格納場所であり,コンポーネントのdata関数のデータと一致する.stateの中のデータは応答式で、Vueコンポーネントはstateからデータを読み出し、stateの中のデータが変化すれば、このデータに依存するコンポーネントも更新されます.一般的にmapStatesによってグローバルstate個gettersを現在のコンポーネントのcomputed計算属性にマッピングします.Getter:gettersはstateの中のデータを計算することができます.それはstateの計算属性です.コンポーネント内では計算プロパティもできますが、gettersは複数のコンポーネント間で多重化できます.1つのステータスが1つのコンポーネント内でのみ使用される場合は、gettersを使用しなくてもいいです.Mutation:stateの状態を変更する唯一の方法はmutationをコミットすることです.Vuexのmutationはイベントによく似ています.各mutationには文字列イベントタイプとコールバック関数があります.このコールバック関数は、実際にステータスを変更する場所であり、受信した最初のパラメータはstateです.mutationを直接呼び出すのではなく、mutation handlerを起動するには、対応するtypeでstoreを呼び出す必要があります.commitメソッド

mutations:{
	increment(state){
		state.count++
	}
}

state.commit('increment')

覚えておいてください:mutationは同期関数Actionでなければなりません:ActionはMutationに似ています.異なるのは、actionがstate状態を直接変更するのではなくmutationをコミットすることです.Actionには任意の非同期操作が含まれます.