最初: <スクリプト セットアップ> 正式な卒業式 vue3 を学習し始めてから、実験的な <スクリプト セットアップ> に気づきました。簡潔な記述方法は多くの人に求められているため（setup(){return{}} を書いたことがある人なら誰でも知っています）、これが vue3 の完成形であるとさえ言う人もいます。アップデートの説明を読んだ後、うーん...公式の苦情が最も致命的です。 は、SFC 内で複合 API を使用する際の生産性を大幅に向上させるコンパイル時の構文糖衣です。 </p> <p><strong>2 番目:<style> v-bind を追加します</strong></p> <p><style> v-bind は、簡単に言えば、コンポーネントによって定義された動的値を内部的に使用できます。担当者は例を挙げました: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { ref } from 'vue' const color = ref('red') Color is: {{ color }} button { color: v-bind(color); } ログイン後にコピーvue の中国語公式 Web サイトには当面この更新コンテンツがないため、必要な学生は外部ネットワークにアクセスして英語のドキュメントを読む必要があるかもしれません。 ドキュメント アドレス: https://v3.vuejs.org/api/sfc-script-setup.htmlログイン後にコピー3 番目: 新しいdefineCustomElement メソッドVue 3.2 では、Vue コンポーネント API を使用して簡単に作成できる新しい defineCustomElement メソッドが導入されました。ネイティブ カスタム要素: import { defineCustomElement } from 'vue' const MyVueElement = defineCustomElement({ // normal Vue component options here }) // Register the custom element. // After registration, all `` tags // on the page will be upgraded. customElements.define('my-vue-element', MyVueElement)ログイン後にコピー4 番目: パフォーマンスの向上ここには、バージョン 3.2 のパフォーマンス アップグレードについて説明するための多くのスペースがあり、新しい命令についても言及しています。 v-memo 簡単に言えば、この命令はテンプレート ツリーの一部を記憶し、仮想 DOM の違いをスキップするだけでなく、新しい VNode の作成も完全にスキップします。複雑で大きなページにも使用できます。 5 番目: サーバー レンダリング最後に、サーバー側レンダリングと新しいエフェクト スコープ API について説明しました。興味のある学生は、更新ドキュメントを詳しく見ることができます。 blog.vuejs.org/posts/vue-3…ログイン後にコピー第6回：1024Lab もう少しお話しましょう すでに使い始めている学生も多いと思います。ドキュメントにあるように、defineProps、defineEmits、defineExpose、および withDefaults はコンパイラ マクロに属します。ドキュメントには次のようにも記載されています: They do not need to be imported, and are compiled away when is processedログイン後にコピー これらは導入する必要はなく、コンパイル中に処理されます。 ただし、導入しないとエラーになります。 const props = defineProps<{ value?: number; }>(); const emit = defineEmits<{ (e: 'update:value', value: number): void; }>(); ログイン後にコピーまず、eslint はエラーを報告します: ESLint: 'defineEmits' is not defined.(no-undef)ログイン後にコピー現時点では、eslint-plugin-vue の設定を変更する必要があります//https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule module.exports = { globals: { defineProps: "readonly", defineEmits: "readonly", defineExpose: "readonly", withDefaults: "readonly" } }ログイン後にコピー次にブラウザ コンソールコンパイル後にエラーが報告される可能性がありますdefineEmits is not definedログイン後にコピーコンパイル中にdefineEmits等が処理されていない場合がありますが、ブラウザでソースコードを見るとdefineEmitsが残っており、赤い波線が引かれています。現時点では、package.json 内の各パッケージのバージョンと vite バージョン 2.4.x を確認する必要がある場合があります。更新して再試行してください。コンパイルされたコードは次のようになります: const _sfc_main = _defineComponent({ props: { value: { type: Number, required: false } }, emits: ["update:value"], setup(__props, { expose, emit }) {} })ログイン後にコピー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
