vue3.0のsetupの使い方は何ですか？

vue3.0 では、setup 関数は組み合わせ API の入り口であり、データとパラメーターを定義するために使用されます。構文は "setup(props,{slots,attrs,emit}){const name = 'name'return {name}}"; この関数は同期のみ可能であり、非同期にはできません。

この記事の動作環境: Windows 10 システム、Vue3 バージョン、DELL G3 コンピューター。

vue3.0のsetupの使い方とは

1. setup関数の特徴と機能

Vue3.0であることは確かです。 Vue2.x バージョンは、日常業務で Vue3 の Vue2.x の関連構文を使用できることを意味しますが、実際に Vue3 を使用してプロジェクトを作成し始めると、Vue2.x よりもはるかに便利であることがわかります

Vue3 の大きな特徴関数 ---- setup

1. setup 関数は、ライフサイクル関数 beforeCreate と Created の 2 つのフック関数、つまり data と data の間の関数です。 setup 関数では使用できません。メソッドのデータとメソッド

2. setup 関数は、Composition API への入り口です。

3. setup 関数で定義された変数とメソッドは、そうしないと、テンプレートで使用できません

2. セットアップ関数に関する注意事項:

1. Created ライフ サイクル メソッド以降セットアップ関数が実行されたときに実行されなかったので、セットアップ関数ではデータとメソッドの変数とメソッドは使用できません

2. セットアップ関数ではデータとメソッドが使用できないため、Vue誤った使用を避けるために、セットアップ関数の変数とメソッドを直接置き換えます。これは未定義に変更されました

3. セットアップ関数は同期のみ可能であり、非同期にはできません

使用法 1: ref

<template>
 <div id="app">
  {{name}}
  <p>{{age}}</p>
  <button @click="plusOne()">+</button>
 </div>
</template>
 
<script>
import {ref} from &#39;vue&#39;
export default {
 name:&#39;app&#39;,
 data(){
  return {
   name:&#39;xiaosan&#39;
  }
 },
 setup(){
  const name =ref(&#39;小四&#39;)
  const age=ref(18)
  function plusOne(){
   age.value++ //想改变值或获取值 必须.value
  }
  return { //必须返回 模板中才能使用
   name,age,plusOne
  }
 }
}
</script>

と組み合わせて使用​​します#使用法 2: コード分割

オプション API と構成 API

オプション API 規約:

受信側を設定する必要がありますprops のパラメータ

data に変数を設定する必要があります

computed に計算されたプロパティを設定する必要があります

watch に listen プロパティを設定する必要があります

メソッド内にイベント メソッドを設定する必要があります。

オプション API では、どこで何をするかについて合意されており、その結果、コードをある程度分割する必要があることがわかります。

Composition API を使用するようになったので、このような合意はなくなりました。したがって、コード構成は非常に柔軟になり、制御コードはセットアップで記述することができます。

setup 関数には props と context という 2 つのパラメータがあります。重要なことは、setup 関数には this がないということです。vue3.0 では、これらへのアクセスは次の形式になります: this.xxx=》context。 xxx

このコンテキストはなくなり、オプション API の強制コード分離もなくなりました。 Comboposition API はより広い世界を提供するため、より慎重かつ制限される必要があります。

複雑なロジック コードの場合は、コンポジション API の本来の目的にさらに注意を払う必要があり、ためらわずにコンポジション API を使用してコードを分離し、エクスポート用にさまざまなモジュールに分割します。

私たちの期待は次のとおりです:

importuseAfrom'./a';
importuseBfrom'./b';
importuseCfrom'./c';
exportdefault{
setup (props) {
let{ a, methodsA } = useA();
let{ b, methodsB } = useA();
let{ c, methodsC } = useC();
return{
a,
methodsA,
b,
methodsB,
c,
methodsC
}
}
}

たとえセットアップ コンテンツ コードの量がますます増えても、私たちは常に、量は多くても乱雑にならず、明確な方法で前進していきます。コード構造。

[関連する推奨事項:「vue.js チュートリアル 」]

以上がvue3.0のsetupの使い方は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。