プロジェクトにおけるVue3のロジック抽出とフィールド表示についての簡単な説明

エクスポートデフォルト{
  設定 （） {
    {queryDo、addDo、delDO、EditDo} を allFun() にします。
    queryDo(); //クエリインターフェースが呼び出されます}
}

// これはページ関数 allFun(){ の領域 A のロジックです
  console.log('私はallFun関数内の直接のステートメントであり、実行されます')
  関数queryDo(){
    console.log('インターフェースをクエリし、バックエンドデータを呼び出しています')
  }
  関数addDo(){
    console.log('私は初心者です')
  }
  関数delDO(){
    console.log('削除しました')
  }
  関数EditDo(){
    console.log('私は編集インターフェースです')
  }
  {queryDo、addDo、delDO、EditDo} を返します
}
</スクリプト>

<スクリプト>
エクスポートデフォルト{
  設定 （） {
    // ここで使用される構造はエリア A です。let {queryDo,addDo,delDO,EditDo}=aAreaAllFun();

    // エリア B let {querHander}=bAreaAllFun();

    {queryDo、addDo、delDO、EditDo、querHander} を返します
  }
}

// これはAエリアページ上の特定のエリアのロジックです。function aAreaAllFun(){
  関数queryDo(){
    console.log('私はエリアAのクエリインターフェースです')
  }
  関数addDo(){
    console.log('私は初心者です')
  }
  関数delDO(){
    console.log('削除しました')
  }
  関数EditDo(){
    console.log('私は編集インターフェースです')
  }
  {queryDo、addDo、delDO、EditDo} を返します
}

// これはエリアBのビジネスロジックです。関数bAreaAllFun(){
  // エリア A のクエリ インターフェイスを直接呼び出します。aAreaAllFun().queryDo();

  関数querHander(){
    console.log("エリア B のクエリ インターフェイス")
  }
 
  {querHander} を返す
}
</スクリプト>

<スクリプト>
エクスポートデフォルト{
  設定 （） {
     // これはAエリアページの特定のエリアのロジックです。let {addDo,delDO,EditDo}=aAreaAllFun()
    
    // これは B エリア ページ上の特定のエリアのロジックです。let {querHander}=bAreaAllFun();

    {queryDo、addDo、delDO、EditDo、querHander} を返します
  }
}

// パブリッククエリインターフェース 多くの領域では関数 queryDo(){ が使用される可能性があります
  console.log('私は地域のクエリインターフェースです、引き出されました')
}

// これはAエリアページ上の特定のエリアのロジックです。function aAreaAllFun(){
 
  関数addDo(){
    console.log('私は初心者です')
  }
  関数delDO(){
    console.log('削除しました')
  }
  関数EditDo(){
    console.log('私はエディターインターフェースです')
  }
  {addDo,delDO,EditDo} を返します
}

// これはエリアBのビジネスロジックです。関数bAreaAllFun(){
  // パブリック クエリ インターフェイス queryDo() を直接呼び出します。

  関数querHander(){
    console.log("エリア B のクエリ インターフェイス")
  }
 
  {querHander} を返す
}
</スクリプト>

<テンプレート>
  <div>
    <h2>名前: {{ areaData.info.name}}</h2>
    <h2>年齢: {{ areaData.info.age}}</h2>
    <h2>性別: {{ areaData.info.sex}}</h2>
  </div>
</テンプレート>
<スクリプト>
'@vue/reactivity' から { reactive } をインポートします。
エクスポートデフォルト{
  設定 （） {
 
    {addDo,areaData}=aAreaAllFun() とします。

    {addDo,areaData} を返します
  }
}
// これはAエリアページ上の特定のエリアのロジックです。function aAreaAllFun(){
  areaData = リアクティブ({
    情報：
      名前:「張三」
      年齢:20歳
      性別: '男性'
    }
  })
  関数addDo(){
    console.log('私は初心者です')
  }
  {addDo,areaData} を返します
}
</スクリプト>

<テンプレート>
  <div>
    <h2>名前: {{ name}}</h2>
    <h2>年齢: {{ age}}</h2>
    <h2>性別: {{ sex}}</h2>
  </div>

  <button @click="ChangeCont">値を変更</button>
</テンプレート>
<スクリプト>
'vue' から { reactive,toRefs } をインポートします。
エクスポートデフォルト{
  設定 （） {
    {名前、年齢、性別、ChangeCont}=aAreaAllFun() とします。
    {名前、年齢、性別、ChangeCont} を返します
  }
}
// これはAエリアページ上の特定のエリアのロジックです。function aAreaAllFun(){
  areaData = リアクティブ({
    情報：
      名前:「張三」
      年齢:20歳
      性別: '男性'
    }
  })

  関数ChangeCont(){
    // この方法で値を変更すると、ビューは応答しなくなります。[エラー]
    //エリアデータ.info={
    // 名前:'Li Si',
    //年齢:21,
    // 性別:'男性'
    // }

    // ビューを正しく更新するにはこれで OK です [ok]
    エリアデータ情報名='123'
    エリアデータ.info.age=12
    areaData.info.sex='男性'
  }

  // toRefs はレスポンシブ オブジェクトを通常のオブジェクトに変換できます。
  // この共通オブジェクトのすべての値は参照です。
  // ref になるので、値を使用する必要があります。
  {ChangeCont,...toRefs(areaData.info)} を返します。
}
</スクリプト>