Vue のリアクティブ構文シュガーは非推奨になったことに注意してください。

この記事では、Vue の最新状況をお届けします。主に Vue のレスポンシブ構文シュガーについて説明します。興味のある友達は一緒に見てください。皆さんのお役に立てれば幸いです。

はじめに

複合 API の概念が導入されて以来、大きな未解決の問題が ref# でした。 ## と reactive の間で 1 つを使用する必要がありますか? reactive には分解により応答性が失われるという問題があり、一方 ref はあらゆる場所で使用する必要がある .value は面倒に感じられ、型システム。.value をドロップします。

たとえば、次のカウンタ:

<template>
  <button @click="increment">{{ count }}</button>
</template>

ref を使用して、count 変数と increment メソッドを定義します。 ##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let count = ref(0) function increment() {   count.value++ }</pre><div class="contentsignin">ログイン後にコピー</div></div> レスポンシブ構文シュガーを使用すると、次のようなコードを書くことができます:

let count = $ref(0)

function increment() {
  count++
}

Vue のレスポンシブ構文シュガーはコンパイル時の変換ステップ

$ref()
1. このメソッドは コンパイル時マクロ コマンド です。これは実行時に呼び出される実際のメソッドではありませんが、最終的な count を示す Vue コンパイラのマーカーとして使用されます。変数は リアクティブ変数 である必要があります。 リアクティブ変数は通常の変数と同様にアクセスして再割り当てできますが、これらの操作はコンパイル後に
.value
2. を持つ ref になります。したがって、上記の例のコードも、ref を使用して定義された構文にコンパイルされます。
ref
3. を返す各リアクティブ API には、接頭辞 $ が付いている対応するマクロ関数があります。次の API が含まれます:

ref ->$ref

• computed ->$computed
• shallowRef ->$shallowRef
• customRef -> $customRef
• toRef -> $toRef

#$()
4. マクロを使用して、既存のref リアクティブ変数に変換します。

   const a = ref(0)
   let count = $(a)
   count++
   console.log(a.value) // 1

$$()
5. マクロを使用すると、リアクティブ変数への参照を、対応する ref への参照として保持できます。

   let count = $ref(0)
   console.log(isRef($$(count))) // true

$$()

は、リアクティブ変数でもあるため、構造化されていない props でも動作します。コンパイラーは、toRef: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const { count } = defineProps&lt;{ count: number }&gt;() passAsRef($$(count))</pre><div class="contentsignin">ログイン後にコピー</div></div>Configuration

レスポンシブ構文シュガーは

Combined API

の独自の機能であり、次のように変換する必要があります。ビルドステップ経由で使用されます。

必須、

@vitejs/plugin-vue@>=2.0.0
1. が必要で、SFC および js(x)/ts(x) ファイルに適用されます。

   // vite.config.js
   export default {
     plugins: [
       vue({
         reactivityTransform: true
       })
     ]
   }

注

reactivityTransform
• はプラグインの最上位オプションになり、script.refSugar には存在しなくなりました。 SFCにだけ効果があるわけではないからです。

vue-cli

ビルドの場合は、vue-loader@>=17.0.0 が必要ですが、現時点では SFC のみ有効です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// vue.config.js module.exports = {   chainWebpack: (config) =&gt; {     config.module       .rule('vue')       .use('vue-loader')       .tap((options) =&gt; {         return {           ...options,           reactivityTransform: true         }       })   } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

webpack

vue-loader がビルドされる場合、vue-loader@>=17.0.0 が必要です (現在は SFC のみ) 。 効果。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// webpack.config.js module.exports = {   module: {     rules: [       {         test: /\.vue$/,         loader: 'vue-loader',         options: {           reactivityTransform: true         }       }     ]   } }</pre><div class="contentsignin">ログイン後にコピー</div></div>

オプションで、次のコードを

tsconfig.json
2. ファイルに追加します。追加しないと、エラーが報告されます。 TS2304: 名前 '$ref' が見つかりません。、影響はありませんが、使用には影響しますが、開発エクスペリエンスには影響します:

   "compilerOptions":{ "types": ["vue/ref-macros"] }

オプションで、次のコードを

eslintrc.cjs
3. ファイルに追加します。それ以外の場合は、プロンプトが表示されます ESLint: '$ ref' is not defined.(no-undef)：

   module.exports = { ...globals: {
       $ref: "readonly",
       $computed: "readonly",
       $shallowRef: "readonly",
       $customRef: "readonly",
       $toRef: "readonly",
     }
   };

レスポンシブ構文シュガーが有効になっている場合、これらのマクロ関数はこれらは世界中で利用可能であり、手動でインポートする必要はありません。 vue ファイルに

vue/macros
4. を明示的に導入することもできるため、2 番目と 3 番目の手順で tsconfig.json と eslintrc を構成する必要がなくなります。 。

   import { $ref } from 'vue/macros'
   
   let count = $ref(0)

廃止された実験的機能

レスポンシブ構文シュガーはかつて実験的な機能であり、廃止されました。
• 廃止された理由

  をお読みください。

将来のマイナー バージョン アップデートで Vue コアから削除される予定です。引き続き使用したい場合は、
• Vue Macros

  プラグインを使用してください。

放棄の理由

あなた Yuxi は 2 週間前 (2023 年 2 月 21 日午前 10:05 GMT 8、グリニッジ標準時 8 時) に個人的に放棄の理由を述べました。翻訳は次のとおりです。

すでにご存知のとおり、私たちはチームの合意により、この RFC を正式に放棄しました。 ＃＃＃＃＃＃＃＃＃理由＃＃＃＃＃＃

Reactivity Transform の本来の目的は、リアクティブ状態を処理する際のよりクリーンな構文を提供することで開発者のエクスペリエンスを向上させることでした。実際の使用状況からのフィードバックを収集するための実験製品としてリリースしています。これらの提案された利点にもかかわらず、私たちは次の問題を発見しました:

• .value を失うと、何が追跡されているのか、どの行が反応性効果をトリガーしたのかを知ることが難しくなります。この問題は、小規模な SFC ではあまり明らかではありませんが、大規模なコード ベースでは、特に構文が SFC の外部でも使用されている場合、精神的なオーバーヘッドがより顕著になります。

• (1) により、一部のユーザーは SFC 内でのみ Reactivity Transform を使用することを選択します。これにより、異なるメンタル モデル間で不一致とコンテキスト切り替えコストが生じます。つまり、SFC 内でのみ使用すると不整合が発生し、SFC の外で使用すると保守性が損なわれるというジレンマがあります。

• 生の参照を使用することを想定した外部関数が依然として存在するため、リアクティブ変数と生の参照の間の変換は避けられません。これにより、学習コンテンツと精神的負荷がさらに増え、初心者にとっては通常の Comboposition API よりも混乱することがわかりました。

最も重要なことは、断片化の潜在的なリスクです。これは明示的なオプトインですが、一部のユーザーは、この提案を使用することをオプトインしているユーザーもいれば、使用しないことを選択しているユーザーもいる、異なるコード ベースで作業する必要があるのではないかという懸念から、この提案に強い反対を表明しています。 Reactivity Transform には別のメンタル モデルが必要であり、JavaScript のセマンティクスが歪められるため、これは当然の懸念です (変数の割り当てによりリアクティブな効果が引き起こされる可能性があります)。

すべてのことを考慮すると、これを安定した機能として使用すると、利点よりも多くの問題が発生するため、良いトレードオフではないと考えています。

移行計画

• この機能は、Vue マクロを介して外部パッケージとしてすでにサポートされています。
• 3.3: この機能は非推奨としてマークされます。引き続き機能しますが、それまでの間は Vue マクロに移行する必要があります。
• 3.4: この機能はコアから削除され、Vue マクロを使用しない限り機能しなくなります。

メッセージ

• Reactivity Transform は公式パッケージから削除されますが、これは良い試みだと思います。 ＃＃＃＃＃＃よく書かれました。私は詳細な RFC とユーザーのフィードバックに基づく客観的な評価が好きです。最終的な結論は理にかなっています。完璧を善の敵にしないでください。
• 私はこの機能の利便性を楽しんでいますが、実際に使用していると断片化の可能性がある問題を発見しました。将来のリリースでこの機能を削除することには抵抗があるかもしれませんが、エンジニアは真剣に受け止める必要があります。 ?
• すべての関数を削除しますか、それとも変換を行う
ref.value
• 部分だけを削除しますか?リアクティブな props デコンストラクションはどうでしょうか。これは今後も定着するのでしょうか? 中規模の電子商取引 Web サイトで問題なく使用しています。これを削除する理由は理解していますが、実際に使ってみると、これは非常に大きな改善であることがわかりました。そこで私の質問は、「今はどうなっているのか？」ということです。
.value
• を嫌う人は、可能であれば ref() を避け、以前のように reactive() を使用することをお勧めしますか?
.value
• は必要な複雑さです。他のリアクティブ ライブラリ xxx.set() と同様です。 すべての Reactivity Transform コードを変換するパッケージを作成するのは簡単ですよね?私も推奨された方法で物事を行うのが好きです。
• ...
推奨学習: 「

vue.js ビデオ チュートリアル

」

以上がVue のリアクティブ構文シュガーは非推奨になったことに注意してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。