【Vue原理】応答式原理-白話版
3564 ワード
文章を書くのは容易ではない,ほめてくれないか.
Vueソースの共有に専念し、文章は白話版とソース版に分けられ、白話版は仕事の原理を理解し、ソース版は内部の詳細を理解するのに役立ち、一緒に勉強しましょう.
研究はVueバージョンに基づいて
【2.5.17】
レイアウトが悪いと思ったら、下のリンクをクリックするか、下に引いて公衆番号に注目してもいいでしょう.
【Vue原理】応答式原理-白話版
本文は白話文の形式でVueの応答式システムの原理を説明するつもりで、できるだけソースコードに触れない.
仕事の流れを述べるだけで、内容が多すぎて煩雑になりたくないので、読む興味がなくなります.
だから私はこれからそれぞれの内容を白話版とソース版に分けるつもりです.
白話版は、あまり頭を使わず、時間をかけずに簡単に読み終え、内容を大まかに理解できるようにするものです.
時間がある人はソース版を読んで、自分でソースを参考にして、研究して勉強することができます.何か間違いがあったら、指摘してくれてありがとう.
レスポンスシステム
Vueインスタンスで宣言されたデータさえあれば、このデータは応答式であることはよく知られています.
応答式とは、つまり、データが変更されると、ビューが再レンダリングされ、最新の値に一致します.
このシステムだからこそ、インタフェースの束縛から離れ、データを操作するだけでいいのです.
次の3つの質問をすることができます
1、Vueはどのようにデータの変化を知っていますか?
2、Vueデータが変更されたとき、どのようにしてどのビューの更新を通知するかを知っていますか?
3、Vueデータが変更されたとき、ビューはどのようにしていつ更新されるか知っていますか?
今、私は3つの重要な概念を説明します.
Object.defineProperty,依存収集,依存更新
Object.defineProperty
この方法は,Vue応答系の真髄,骨髄,脳髄である.
Objectを使用します.definePropertyは、オブジェクトの各プロパティに対してgetメソッドとsetメソッドを設定できます.
Object.definePropertyでは、configurable、enumerableなどのプロパティを多く設定できますが、現在は説明が多くなく、getとsetに重点を置いています.
ではgetとsetの方法は何の役に立ちますか?
get値は属性がアクセスされるとget関数がトリガーされる関数です
set値は同じ関数で、属性が付与されるとset関数がトリガーされます
例を挙げる
objにアクセスするとnameの場合、「getがトリガーされた」と印刷されます.
私がobjだとしたらname付与時、obj.name=5で、「set」がトリガーされます.
これで私の最初の質問に答えることができます.
Vueはどのようにデータの変化を知っていますか?
はい、Vueは属性のsetメソッドで手足を動かしているので、データが変わると属性のsetメソッドをトリガし、Vueはデータが変わることを知ることができます.
依存収集
簡単に言えば
dataで宣言された各属性には、誰が依存しているか(使用している)を保存する配列があります.
例を挙げる
そしてページAはnameを参照する
このときnameはページAをその後宮に存在させる(このページは私に依存する)
どうしてですか.
誰が依存しているかを知ってから、変更が発生したときに、依存しているページを通知し、ページの更新を完了させることができます.
TIP
実は、nameに頼るところは、ページだけでなく、computed、watch...などですが、ここではすべてページという言葉で置き換えます.
これが収集に頼って、私に頼って(私のものを使って)、すべて保存します.
しかし、どこに保存されているのか、具体的に何が保存されているのか、私たちのところはしばらく深くありません.これは白話文だからです.
上記の例に従って、Vueの内部からデータを印刷して簡単に理解すればいいです.
名前属性は、depを使用してページAという依存性を保存し、保存されているのは実際にページAのWatcherであることがわかります.
TIP
簡単に言えば、watcherとは何か、Vueインスタンスごとにインスタンス更新に使用できる独自のwatcherがあります.
まとめてみる
1、dataで宣言された各属性には、専用の依存コレクタsubsがあります.
2、ページが属性に使用されると、ページのwatcherが依存コレクタsubsに配置される
データはいつ収集依存を行いますか?
答えは、ObjectdefineProperty-get
ページAがnameを読み込むとnameのget関数がトリガーされ、そのときnameはページAのwatcherを保存します!
これで私の2番目の質問に答えることができます.
Vueデータが変更された場合、どのビューの更新を通知するかをどのように知っていますか?
はい、依存コレクタのビューがあることを通知します.
依存更新
依存更新とは、すべての依存を更新することを通知することです.
上記の説明では、各プロパティに依存コレクタsubsが保存されていることを知っています.
この依存コレクタは、データが変化したときに更新を通知するために使用されます.
データはいつ依存更新されますか?
答えはdefineProperty - set
上記のVueの例を例にとると
nameが変更されると、nameは自分の依存コレクタsubsを遍歴し、watcherに1つずつ通知し、watcherに更新を完了させる.
ここでnameはページAに通知し、ページAは新しいnameを再読み込みし、レンダリングを完了します.
これで私の2番目の質問に答えることができます.
Vueデータが変更されたとき、ビューはどのように更新されるか知っていますか?
はい、データ変化がset関数をトリガすると、ビューに通知され、ビューが更新されます.
簡単にまとめる
1、Object.収集に依存するdefineProperty-get
2、Object.更新に依存するdefineProperty-set
3、dataが宣言する属性ごとに、専属依存コレクタsubsを1つ持つ
4、依存コレクタsubs保存の依存はwatcher
5、watcherはビューの更新に使用できる
最後に
もし间违いがあることを発见して、言うのが间违っている地方、とても指摘することができることに感谢して、私は再びハハハに感谢することができて、とても歓迎していっしょに学习を探求します
Vueソースの共有に専念し、文章は白話版とソース版に分けられ、白話版は仕事の原理を理解し、ソース版は内部の詳細を理解するのに役立ち、一緒に勉強しましょう.
研究はVueバージョンに基づいて
【2.5.17】
レイアウトが悪いと思ったら、下のリンクをクリックするか、下に引いて公衆番号に注目してもいいでしょう.
【Vue原理】応答式原理-白話版
本文は白話文の形式でVueの応答式システムの原理を説明するつもりで、できるだけソースコードに触れない.
仕事の流れを述べるだけで、内容が多すぎて煩雑になりたくないので、読む興味がなくなります.
だから私はこれからそれぞれの内容を白話版とソース版に分けるつもりです.
白話版は、あまり頭を使わず、時間をかけずに簡単に読み終え、内容を大まかに理解できるようにするものです.
時間がある人はソース版を読んで、自分でソースを参考にして、研究して勉強することができます.何か間違いがあったら、指摘してくれてありがとう.
レスポンスシステム
Vueインスタンスで宣言されたデータさえあれば、このデータは応答式であることはよく知られています.
応答式とは、つまり、データが変更されると、ビューが再レンダリングされ、最新の値に一致します.
このシステムだからこそ、インタフェースの束縛から離れ、データを操作するだけでいいのです.
次の3つの質問をすることができます
1、Vueはどのようにデータの変化を知っていますか?
2、Vueデータが変更されたとき、どのようにしてどのビューの更新を通知するかを知っていますか?
3、Vueデータが変更されたとき、ビューはどのようにしていつ更新されるか知っていますか?
今、私は3つの重要な概念を説明します.
Object.defineProperty,依存収集,依存更新
Object.defineProperty
この方法は,Vue応答系の真髄,骨髄,脳髄である.
Objectを使用します.definePropertyは、オブジェクトの各プロパティに対してgetメソッドとsetメソッドを設定できます.
Object.definePropertyでは、configurable、enumerableなどのプロパティを多く設定できますが、現在は説明が多くなく、getとsetに重点を置いています.
ではgetとsetの方法は何の役に立ちますか?
get値は属性がアクセスされるとget関数がトリガーされる関数です
set値は同じ関数で、属性が付与されるとset関数がトリガーされます
例を挙げる
var obj={
name:" "
}
Object.defineProperty(obj,"name",{
get(){
console.log("get ")
},
set(val){
console.log("set ")
}
})objにアクセスするとnameの場合、「getがトリガーされた」と印刷されます.
私がobjだとしたらname付与時、obj.name=5で、「set」がトリガーされます.
これで私の最初の質問に答えることができます.
Vueはどのようにデータの変化を知っていますか?
はい、Vueは属性のsetメソッドで手足を動かしているので、データが変わると属性のsetメソッドをトリガし、Vueはデータが変わることを知ることができます.
依存収集
簡単に言えば
dataで宣言された各属性には、誰が依存しているか(使用している)を保存する配列があります.
例を挙げる
new Vue({
data(){
return {
name:" "
}
}
})そしてページAはnameを参照する
{{name}}このときnameはページAをその後宮に存在させる(このページは私に依存する)
どうしてですか.
誰が依存しているかを知ってから、変更が発生したときに、依存しているページを通知し、ページの更新を完了させることができます.
TIP
実は、nameに頼るところは、ページだけでなく、computed、watch...などですが、ここではすべてページという言葉で置き換えます.
これが収集に頼って、私に頼って(私のものを使って)、すべて保存します.
しかし、どこに保存されているのか、具体的に何が保存されているのか、私たちのところはしばらく深くありません.これは白話文だからです.
上記の例に従って、Vueの内部からデータを印刷して簡単に理解すればいいです.
名前属性は、depを使用してページAという依存性を保存し、保存されているのは実際にページAのWatcherであることがわかります.
TIP
簡単に言えば、watcherとは何か、Vueインスタンスごとにインスタンス更新に使用できる独自のwatcherがあります.
まとめてみる
1、dataで宣言された各属性には、専用の依存コレクタsubsがあります.
2、ページが属性に使用されると、ページのwatcherが依存コレクタsubsに配置される
データはいつ収集依存を行いますか?
答えは、ObjectdefineProperty-get
ページAがnameを読み込むとnameのget関数がトリガーされ、そのときnameはページAのwatcherを保存します!
これで私の2番目の質問に答えることができます.
Vueデータが変更された場合、どのビューの更新を通知するかをどのように知っていますか?
はい、依存コレクタのビューがあることを通知します.
依存更新
依存更新とは、すべての依存を更新することを通知することです.
上記の説明では、各プロパティに依存コレクタsubsが保存されていることを知っています.
この依存コレクタは、データが変化したときに更新を通知するために使用されます.
データはいつ依存更新されますか?
答えはdefineProperty - set
上記のVueの例を例にとると
nameが変更されると、nameは自分の依存コレクタsubsを遍歴し、watcherに1つずつ通知し、watcherに更新を完了させる.
ここでnameはページAに通知し、ページAは新しいnameを再読み込みし、レンダリングを完了します.
これで私の2番目の質問に答えることができます.
Vueデータが変更されたとき、ビューはどのように更新されるか知っていますか?
はい、データ変化がset関数をトリガすると、ビューに通知され、ビューが更新されます.
簡単にまとめる
1、Object.収集に依存するdefineProperty-get
2、Object.更新に依存するdefineProperty-set
3、dataが宣言する属性ごとに、専属依存コレクタsubsを1つ持つ
4、依存コレクタsubs保存の依存はwatcher
5、watcherはビューの更新に使用できる
最後に
もし间违いがあることを発见して、言うのが间违っている地方、とても指摘することができることに感谢して、私は再びハハハに感谢することができて、とても歓迎していっしょに学习を探求します