目次
オプション
オプションで変数を宣言して使用する方法は次のとおりです。
<スクリプト>
デフォルトのエクスポート {
データ(){
戻り値{
message_export_data: 'こんにちは、message_export_data!'
}
}
}
</script>
<テンプレート>
<h1> { {メッセージエクスポートデータ }} </h1>
</テンプレート>
実行後、ページに「hello message_export_data!」が表示されます。
データについて
Data 内のデータは通常のオブジェクトです。通常、データを返すには return を使用する必要があります。return でラップした後、変数は現在のコンポーネントでのみ有効になり、他のコンポーネントには影響しません。
複数のオブジェクトを宣言してその中で使用できます。
例：
<スクリプト>
デフォルトのエクスポート {
データ(){
戻り値{
obj1: {
message_export_data: 'こんにちは、message_export_data!'
}、
オブジェクト2: {
message_export_data: 'こんにちは、obj2:message_export_data!'
}
}
}
}
</script>
<テンプレート>
<h1> { { obj1 . message_export_data }} </h1><br>
<h2> { { obj2 . メッセージ_エクスポート_データ }} </h2>
</テンプレート>
操作の結果は次のようになります。
data() に加えて、vue の共通属性には、computed、watch、およびメソッドが含まれます。
計算されたものについて
定義されたデータ (データ内) を頻繁に変更する必要がある場合は、計算されたデータが推奨されます。
例: 収入 - 注記 = 純利益
<スクリプト>
デフォルトのエクスポート {
データ(){
戻り値{
収入： 6000 、
支払い: 2000
}
}、
計算結果: {
純収入(){
これを返してください。収入はこれ です。支払い
}
}
}
</script>
<テンプレート>
<h1>純利益は次のとおりです: { { net_income }} </h1><br>
</テンプレート>
操作の結果は次のようになります。
Computed の優れた点は、計算されたデータが変更に依存する場合、そのデータが再計算されてキャッシュされ、他のデータが変更された場合、computed は再計算されないことです。
時計について
データの値の変化を監視するためのリスナーですが、watchのメソッドはデフォルトでは実行されず、監視している値が変化した場合にのみ実行されます。
したがって、無限ループを避けるために、computed または watch で監視されている値を変更しないでください。
たとえば、次の例で実装される関数は次のとおりです。
aの値が増加するとbの値は減少し、aの値が減少するとbの値は変化しません。
<スクリプト>
デフォルトのエクスポート {
データ(){
戻り値{
a： 1 、
b： 100 、
変化： 0
}
}、
メソッド: {
Change_a_up (){
これ。++ ;
}、
Change_a_down (){
これ。-- ;
}
}、
見る: {
a : 関数( newval , oldvar ) {
これ。変更 =新しい値-古い変数;
if ( this .change > 0 ) {
これを返してください。b --;
} else if ( this .change < 0 ) {
これを返してください。b ;
}
}
}、
}
</script>
<テンプレート>
<span> a:{ { a }} </span><br>
<スパン> b:{ { b }} < /スパン><br>
<button @ click =" change_a_up " > a++ </button><br>
<button @ click =" change_a_down " > a-- </button>
</テンプレート>
上記の例では、ウォッチ内の監視対象の a には、監視対象の a の値が変化したときに実行されるコールバック関数が含まれています。コールバック関数の 2 つのパラメータは新しい値と古い値であり、実行結果は次のとおりです。
注意すべき点は、watch の関数名は data の属性名と一致している必要があり、watch が動作するには data のデータに依存するということです。
メソッドについて
vueで関数を定義する際に使用します。上記3つとの違いは、メソッドに定義した関数を実行する前に手動で呼び出す必要がある点です。詳しくは「watch」の例を参照してください。
上記の違い
- メソッド 内の関数は、
- watch と computed : computed の関数は return to return を使用する必要があり、watch は不要です。watch は 1 つのデータが複数のデータに影響を与えるシナリオに適しており、computed は複数のデータが 1 つのデータに影響を与えるシナリオに適しています。
モジュラー
変数を宣言して組み合わせて使用する方法は次のとおりです。
<スクリプトの 設定>
'vue'から { ref }をインポートします
const message_import_ref_const = ref ( 'こんにちは message_import_ref_const!' )
</script>
<テンプレート>
<h1> { { message_import_ref_const }} </h1>
</テンプレート>
実行後、「hello message_import_ref_const!」がページに表示されます。ラベルの設定に注意してください。設定は組み合わせ記号であり、すべての組み合わせは設定内で実行する必要があります。
上記のコードでは、ref() を使用してリアクティブ オブジェクトが作成されます。
vue 合成では、ref() 関数または reactive() 関数を使用して、応答性の高いオブジェクトまたは配列を作成できます。基本データ型は ref パッケージを使用し、参照型は reactive パッケージを使用します。
リアクティブ オブジェクトは通常のオブジェクトのように動作します。違いは、Vue がリアクティブ オブジェクト プロパティへのアクセスと変更を追跡できることです。
const、var、letについて
const は変数を定数として宣言し、変更できず、初期値を割り当てる必要があります。宣言前に変数を使用することはできません。
const 型の変数を変更しようとすると、次のようになります。
次のエラーが発生しました:
Varで宣言した変数は変更可能です 初期値が代入されていない場合は undefined が出力され、エラーにはなりません 変数宣言前でも使用可能です Var では繰り返し宣言が可能で、繰り返し宣言すると値が上書きされます。
Let で宣言された変数は、同じコード ブロック内で繰り返し宣言することはできず、変数が配置されているコード ブロック内でのみ有効です。変数宣言の前に変数を使用することはできません。const のこれらの特性も利用できます。違いは、初期値が割り当てられていない場合に出力を unfine にし、エラーが報告されないことです。
要約:
実際に使う場合は const > let > var となります。
const は主に参照データの宣言に使用され、let は主に基本データ型の宣言に使用されます。
リファレンスについて
Vue は、任意の値型を使用できるリアクティブ型を作成できる ref() メソッドを提供します。
受信パラメータの値を .value プロパティを持つオブジェクトとしてラップします。
以下の例を参照してください。
<スクリプトの 設定>
'vue'から { ref }をインポートします
定数 =参照( 66 ) _
console . log ( num ) // num をコンソールに直接出力します
</script>
この時点でのコンソール出力は次のようになります。
print num を print mun.value に変更します。
この時点でのコンソール出力: 66
そして、 ref がテンプレート タグのトップレベル属性としてアクセスされると、元の例のように、自動的にラップが解除されます。
このとき.valueを使わずにデータを取得することも可能です。
同様に、ref がリアクティブ オブジェクト内にネストされている場合、自動的にラップが解除されます。
<スクリプトの 設定>
'vue'から { ref }をインポートします
'vue'から {リアクティブ }をインポートします
定数 =参照( 66 ) _
const num2 =リアクティブ({
番号
})
console . log ( num ) // num オブジェクトを出力します
コンソール.log ( num . value ) // 出力66
console .log ( num2 . num ) // 出力66
</script>
残念ながら、リアクティブ オブジェクトとは異なり、リアクティブ配列または Map のようなプリミティブ コレクション型の要素としてアクセスされた場合、 ref はラップ解除されません。
つまり、ref が配列またはネイティブ コレクションに含まれる場合でも、次の例に示すように、データを取得するために value を使用する必要があります。
コンソール出力は次のとおりです。
リアクティブについて
Reactive は、ref と同様に、応答性の高いデータを作成するために使用されます。
通常、リアクティブ パラメーターはオブジェクトまたは配列であり、複雑なデータ型を応答性の高いデータに変換できます。
リアクティブでプリミティブ データ型を宣言する場合:
const num =リアクティブ( 100 );
Vue は次のような警告を出します。
以上。