Vue#
- Vue は「ウェブビュー層」に特化したフロントエンドフレームワークです。
- Vue は js を使用して特定の登録されたビューコンポーネントを操作するフレームワークです。
- Vue はすでに多くの優れた機能を持っています。
<html>
<div id="app">{{message}}</div>
<script>
new Vue({
el: '#app',
data: {
message: 'こんにちは、世界！'
}
})
</script>
</html>
以上は典型的な最小の Vue フレームワークの HTML です。
Vue は id が app の全体の div ブロックを受け取り、Vue はこのブロックを操作します。
{{message}} は HTML が認識できない構文ですが、全体の div ブロックを Vue に渡すことで、Vue はそれを認識できます。
サイクル図#
一、作成段階（beforeCreate、created）#
created 前#
上記の html コードでは、"{{}}" の二重波括弧構文テンプレート構文を使用していることがわかります。これは html には存在しない構文です。new Vue に渡される el: '#app' パラメータを見てみましょう。はい、私たちは id が app の div 全体を Vue に管理させています。私たちは Vue を使用してこの id が app の div（専門的には DOM）を操作しています。したがって、Vue のドキュメントにも「Vue のコアライブラリは視覚層にのみ焦点を当てています」と記載されています。
したがって、Vue の作成段階（created 前）では、渡された div、data、methods などを初期化します。
つまり、準備作業を行います。
二、マウント段階（beforeMount、mounted）：#
created から beforeMount 段階#
created から beforeMount のこの段階で非常に重要なことが起こります ——Vue は渡された id が app の div を抽象構文木（AST）という高級なものに変換します。なぜ抽象構文木に変換する必要があるのでしょうか？
（はは、この質問は少し考えれば答えが得られます。読者は少し立ち止まって、記事を続けて読んでください）
これにより、Vue は html で書かれた二重波括弧構文テンプレート構文や、タグに追加された v-bind、v-for、v-if、さらにはカスタムタグなどのさまざまなものを理解できるようになります。上記で書いた id が app の div——
<div id="app">
<p>
{{message}}
</p>
</div>
AST に変換された後はこのようになります ——
{
tag: "div",
type: 1,
staticRoot: false,
static: false,
plain: true,
parent: undefined,
attrsList: [],
attrsMap: {},
children: [
{
tag: "p",
type: 1,
staticRoot: false,
static: false,
plain: true,
parent: {
tag: "div",
type: 1,
staticRoot: false,
static: false,
plain: true,
parent: undefined,
attrsList: [],
attrsMap: {},
},
attrsList: [],
attrsMap: {},
children: [
{
type: 2,
text: {{message}},
static: false,
expression: "_s(message)"
}
]
}
]
}
この抽象構文木（AST）は、実際には js オブジェクトに過ぎず、この js オブジェクトには必要なさまざまな情報が含まれています。
Vue はこの変換を行うことで、js がこれらの変数を簡単に操作できるようになり、二重波括弧内の変数を data 内のデータに置き換えることができます。
beforeMount から mounted 段階#
しかし、ブラウザはこの AST を理解できません。したがって、Vue は beforeMount から mounted のこの段階で AST を再び html コードに変換します。つまり、mounted が完了すると
テンプレート構文
<div id="app">
<p>
{{message}}
</p>
</div>
は次のように変わります。
<div id="app">
<p>
こんにちは、世界！
</p>
</div>
三、マウント完了（beforeUpdate、updated）：#
ここで、名高い仮想 DOM がついに登場します。
仮想 DOM がどのようなものかを見てみましょう ——
{
tag:'div', // 要素タグ
attrs:{ // 属性
id:'app'
}
children:[
{tag:'p',...} // 子要素
]
}
（これも js のオブジェクトであり、キーと値でノードを記述していますが、AST とは異なる段階の産物であることを忘れないでください）
では、なぜ仮想 DOM が必要なのでしょうか —— 現代のウェブアプリケーションは実行中に状態が絶えず変化します。ユーザーがボタンをクリックしたり、axios リクエストを送信したりすることがあります。これらの行動はすべて非同期です。状態が変化するたびに、再描画が必要になります。
毎回変化があったときに、全体の DOM を削除して再描画する必要があるのでしょうか？
実際の DOM のボリュームを見てみましょう ——
1 つの div 要素にはこれだけのものがあります。このようにすることは、無駄に大きなコストがかかります。
したがって、どの DOM が変化したかを検出し、変化した DOM を更新することで、パフォーマンスを大幅に最適化することができます。
各フレームワークには独自の解決策があります。Angular.js では、ダーティチェック手法を使用していますが、ここでは議論しません。一方、react.js と Vue.js の手法は仮想 DOM です。
以下の図は仮想 DOM の具体的なプロセスです。
この図を見れば、Vue のライフサイクルにおける beforeUpdate と updated がいつトリガーされるかが理解できます。
要するに、仮想 DOM はこのように比較の役割を果たし、違いを見つけて選択的に置き換えて描画し、パフォーマンスを最適化する目的を達成します。
四、破棄段階（beforeDestroy、destroyed）：#
これは Vue インスタンスがもはや使用されない破棄段階であり、具体的な詳細は最初の画像で非常に詳細に説明されていますので、ここでは繰り返しません。#
次に、Vue のリアクティブデータバインディングについて説明します。
リアクティブデータバインディングとは何ですか？
リアクティブデータバインディングとは、data 内のデータを変更すると、ページのビューもそれに応じて変わることを指します。これはページをリフレッシュせずに実現されます。
Vue はどのようにこれを実現しているのでしょうか？
データが変化した後にビューを変更するためには、まずどこが変化したかを監視する必要があります。
-
変化の検出:
JavaScript を深く学んだことがある人は、js オブジェクトの変化を検出する方法が 2 つあることを知っています。Object.defineProperty と ES6 の Proxy（不明な方には具体的な使用方法はここでは議論しませんが、Object.defineProperty では渡されたオブジェクトが読み取られると get コールバックがトリガーされ、渡されたオブジェクトが変更されると set コールバックがトリガーされます。ES6 の Proxy は js が提供するソースプログラミング機能であり、オブジェクトの変化を直接検出できます） -
変化の通知
一連のコードを通じてどのデータが変化したかを監視した後、次のステップはこのデータを使用している場所に通知することです。このデータを使用している場所が新しいデータを使用することを希望します。DOM に直接通知するのですか？ Vue1.x のバージョンでは確かにそうでしたが、これほど正確にすることはコストがかかります。依存関係の追跡はメモリのオーバーヘッドが非常に大きくなるため、Vue は Watcher というものを作成しました。データが変化したときに最初に Watcher に通知し、Watcher がこのデータを使用している場所に通知します。各 Vue コンポーネント、つまり Vue インスタンスには Watcher があり、統一的に管理されて最適化の効果を達成します。
PS：実際には非常に簡単です。データの変化を監視し、そのデータを使用している場所に通知するだけです。
ただし、注意すべき点があります。配列データが変化した場合、Object.defineProperty と ES6 の Proxy では監視できません。したがって、配列の変化は Array プロトタイプにインターセプターを構築することで実現されます。6 種類の配列メソッドのいずれかが使用されると、インターセプターが監視できるようになります。
まとめ
上記の各ステップで、Vue は非常に多くの作業を行っています。html コードを AST に変換し、仮想 DOM を描画し、diff アルゴリズムを適用し、さまざまな API を実装しています。ソースコードには多くの興味深い部分があり、関数のカリー化を使用して速度を最適化し、抽象構文木内でオプティマイザーを使用して、変化のない DOM 要素の変更を避けています。さらに、v-if、v-for の原理、フィルターなどについても多くの理解が得られれば、より優れた Vue コードを書くのに大いに役立ちます。
————————————————
著作権声明：この記事は CSDN のブロガー「我叫李文（living）」のオリジナル記事であり、CC 4.0 BY-SA 著作権協定に従っています。転載する場合は、原文の出典リンクとこの声明を添えてください。
原文リンク：https://blog.csdn.net/qq_45963949/article/details/124575471
Vue の使用#
テキストバインディング#
- {{variable}} タグ内で定義され、挿入バインディング
- v-text='variable' タグ属性内で定義され、要素のテキスト内容を変数にバインド
- v-html='variable' タグ属性内で定義され、要素のタグ内容を変数にバインド
属性バインディング#
要素の属性値を変数に一方向バインドし、属性値が変化すると変数も変化します。
- v-bind='variable' / ='variable'
<div>
<input type="text" :value="info">
<input type=="text" v-bind:value="info">
<a :href="url">ハイパーリンク</a>
<img :src="imageName" alt="">
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'div',
data:{
info:"属性バインディング",
url:'http://www.baidu.com',
imageName:'head.jpg'
}
})
</script>
双方向バインディング#
タグ属性内で定義され、タグコントロールの value 値と変数を双方向バインドし、相互に影響を与えます。
- v-model='variable'
<div id="app">
<input type="text" v-model='info'>
{{info}}
<h1>
登録フォーム
</h1>
<form action="">
ユーザー名：<input type="text" v-model="user.username"><br>
パスワード：<input type="password" v-model="user.password"><br>
</form>
<script src="../vue.js"></script>
<script>
let v = new Vue({
el:"#app",
data:{
info:"双方向バインディング",
user:{
username:"",
password:""
}
}
})
</script>
</div>
イベントバインディング#
要素のイベントと関数をバインドします。
マウスクリックの例： v-on:click="func" または @click="func"
<div id="app">
<input type="button" value="bt1" @click='f()'>
<input type="button" value="bt2" v-on:click='f()'>
</div>
<script src="../vue.js"></script>
<script>
let v = new Vue({
el:"div",
data:{},
methods:{
f:function(){
console.log("ボタンがクリックされました！");
}
}
})
</script>
繰り返し#
要素がバインドされたオブジェクトのメンバー数に基づいて自動的に同じ要素を生成します。
v-for="(variable,i) in vars"
<table>
<caption>車リスト</caption>
<Tr>
<th>番号</th><th>ブランド名</th><th>価格</th><th>タイプ</th>
</Tr>
<tr v-for="(car,i) in arr">
<td>{{i+1}}</td>
<td>{{car.name}}</td>
<td>{{car.price}}</td>
<td>{{car.type}}</td>
</tr>
</table>
<script src="../vue.js"></script>
<script>
let v=new Vue({
el:"table",
data:{
arr:[ {name:'a',price:50000,type:'car1'},
{name:'b',price:60000,type:"car2"},
{name:'c',price:40231,type:'car3'}]
}
})
</script>
条件判断#
要素の表示状態を変数にバインドし、true の場合は表示、false の場合は表示しません。
v-if="variable"とv-else
<div id="app">
<h1 v-if="isVisible">
タイトルの表示を調整できます
</h1>
<h1 v-else>
そうでなければこの内容を表示
</h1>
</div>
<script src="../vue.js"></script>
<script>
let v=new Vue({
el:'div',
data:{
isVisible:true
}
})
</script>
ヒント#
propertyattribute前者はタグ固有の属性、後者はタグ内で定義された k-v キー値ペアです。npm root -gグローバルプラグインパスを確認します。
css#
Position の位置付け#
-
static
デフォルトの文書フロー位置付け、上から下、左から右に配置されます。
-
relative
自身の通常の文書フローに対する位置付けであり、その占有スペースは変わらず、一定のオフセットを持ちます。
-
fixed
== ブラウザウィンドウ == に対する位置付けであり、ページのスクロールに従って移動しません。
-
absolute
絶対位置付けは、位置付けされた親要素または html 要素に対するものです。
絶対位置付けは要素を文書フローから外し、文書フローのスペースを占有せず、重なり合うことができます。
-
sticky
粘着位置付けは、要素が relative と fixed の間で切り替わり、「一定の範囲までスクロールすると、要素がページに付着する」効果を実現します。