糖衣構文とは何ですか? Vue3.2でシンタックスシュガーを使用するにはどうすればよいですか?-Vue.js-php.cn

Vue で構文シュガーを使用するにはどうすればよいですか?次の記事では、シンタックスシュガーについて説明し、Vue3.2 シンタックスシュガーの使用方法を紹介します。

糖衣構文とは何ですか? Vue3.2でシンタックスシュガーを使用するにはどうすればよいですか?

1. 概要

Vue2 期間では、さまざまな変数、メソッド、および Computed 属性、などは、それぞれ data、methods、computed、その他のオプションに格納されます。このように書かれたコードは、後で参照するのに便利ではありません。論理的には、オプション間を行き来する必要があります。 vue3.0Combined APIsetup 関数は、この問題を解決するために開始されました。これにより、論理的な焦点がより集中し、構文がより合理化されますが、vue3 の構文を使用すると、 .0 は、コンポーネントを構築するときに、外部で定義されたメソッド変数を <template> で使用する前に常に返す必要があり、少し面倒です。 . 2 糖衣構文といくつかの新しい API の登場により、コードがさらに簡素化されました。 [学習ビデオ共有: vue ビデオチュートリアル、Web フロントエンドビデオ ]

構文糖衣とは何ですか?

シンタクティックシュガー (英語: Syntactic Sugar) は、イギリスのコンピュータ科学者 ピーターランディングによって発明された用語で、ある特定のことを指します。言語の機能には影響を与えませんが、プログラマにとってはより便利な構文が追加されました。構文シュガーを使用すると、プログラムがより簡潔になり、読みやすくなります。

Vue3.2`構文シュガー`

vue3.0 とvue3.2

vue3.0 コンポーネント

<template>
    <div>
    </div>
</template>
<script>
export default {
    components: {
    },
    props: {
    },
    setup () {
        return {}
    }
}
</script>
<style scoped>
</style>

ログイン後にコピー

コンポーネント

<template>
    <MyTestVue :title="title" @click="changeTitle" />
</template>
<script setup>
import MyTestVue from &#39;./MyTest.vue&#39;;
import { ref } from &#39;vue&#39;;
const title = ref(&#39;测试一下&#39;)
const changeTitle = () => {
    title.value = &#39;Hello,World&#39;
}
</script>
<style scoped>
</style>

ログイン後にコピー

vue3.0
と vue3.2 コンポーネントテンプレートのバージョンの主な変更点は、setup 関数が 3.2 ではなくなり、script タグに配置されたことです。
これらは直感的な変更です。次に、具体的な使用方法を学びましょう。

#1. コンポーネントの登録

vue3.0

でコンポーネントを使用する場合は、コンポーネントオプションを使用して明示的に登録する必要があります。

<script>
import ComponentA from &#39;./ComponentA.js&#39;

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}
</script>

ログイン後にコピー

人気のチュートリアル

詳細>