これらの新機能を備えた Vue3.2 がリリースされました。

最初: 8e22d5627eed85f4f7555e8fe9295d57 正式な卒業式

vue3 を学習し始めてから、実験的な 8e22d5627eed85f4f7555e8fe9295d57 に気づきました。簡潔な記述方法は多くの人に求められているため（setup(){return{}} を書いたことがある人なら誰でも知っています）、これが vue3 の完成形であるとさえ言う人もいます。アップデートの説明を読んだ後、うーん...公式の苦情が最も致命的です。

5101c0cdbdc49998c642c71f6b6410a8 は、SFC 内で複合 API を使用する際の生産性を大幅に向上させるコンパイル時の構文糖衣です。

2 番目:c9ccee2e6ea535a969eb3f532ad9fe89 v-bind を追加します

c9ccee2e6ea535a969eb3f532ad9fe89 v-bind は、簡単に言えば、コンポーネントによって定義された動的値を内部的に使用できます。担当者は例を挙げました:

import { ref } from 'vue'
const color = ref('red')
</script>
<template>
  <button @click="color = color === &#39;red&#39; ? &#39;green&#39; : &#39;red&#39;">
    Color is: {{ color }}
  </button>
</template>
<style scoped>
button {
  color: v-bind(color);
}
</style>

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 `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define(&#39;my-vue-element&#39;, 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

これらは導入する必要はなく、コンパイル中に処理されます。

ただし、導入しないとエラーになります。

<script setup>
const props = defineProps<{
  value?: number;
}>();
const emit = defineEmits<{
  (e: &#39;update:value&#39;, value: number): void;
}>();
</script>

まず、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 }) {}
 })

以上がこれらの新機能を備えた Vue3.2 がリリースされました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。