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

最初: 正式な卒業式

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

2 番目:

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 サイトの他の関連記事を参照してください。