コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > Vue.js > vue3 での setup() 関数と reactive() 関数の使用の簡単な分析

vue3 での setup() 関数と reactive() 関数の使用の簡単な分析

青灯夜游
リリース： 2023-04-17 18:21:29
転載
2051 人が閲覧しました

この記事では、結合 API の基本概念、setup() エントリ関数の概念、および vue3 プロジェクトでの reactive() の使用方法について説明します。

vue3 での setup() 関数と reactive() 関数の使用の簡単な分析

#1. 結合 API 比較 vue2 プロジェクト構造

vue2

  • 1. 利点: 学習と使用が簡単で、コードを記述する場所が合意されています。

  • 2. 欠点: 大規模なプロジェクトの場合、コードの再利用、管理、メンテナンスが難しくなります。

  • 3. 説明: 同じ関数のデータとビジネス ロジックが同じファイル内の N か所に分散されており、ビジネスの複雑さが増すにつれて、データに類似したデータを頻繁に使用する必要があります。 () そしてメソッドでの前後の処理

vue3

  • 1. 利点: 同じ機能のデータとビジネス ロジックをまとめて整理できるため、再利用とメンテナンスが容易になります。

  • 2. 欠点: 適切なコード構成と分割機能が必要であり、Vue2 ほど簡単に始めることはできません。

  • 3. 説明: 注: 誰もが Vue3.0 バージョンにより適切に移行できるようにするために、現在、Vue2.x オプション API の記述方法がサポートされています。

vue3 での setup() 関数と reactive() 関数の使用の簡単な分析

2. setup() 関数の使用

##2.1 setup() 関数の基本概念Vue3 の setup() は、Vue3 の新しいコンポーネント構成項目であり、 Vue2 )、computed()、およびその他の構成項目。 setup() はより簡潔な記述方法を提供し、Vue3 が提供する Comboposition API をより適切に活用できます。 setup() 関数は、props と context という 2 つのパラメータを受け入れます。このうち、propsはコンポーネントが受け取るプロパティ値であり、contextにはコンポーネントの何らかの構成情報が含まれます。

1. 概要: setup は Vue3 の新しいコンポーネント設定項目であり、組み合わせ API のエントリ関数として機能します。

  • 2. 実行タイミング: インスタンスの作成前 (Vue2 の beforeCreate よりもさらに前) に呼び出されます。

  • 3. 注: セットアップ実行時にインスタンスが作成されていないため、data およびメソッド内のデータをセットアップで直接使用することはできません。そのため、Vue3 セットアップのこれもバインドされています。未定義。

  • Vue2 のデータとメソッドの設定項目は Vue3 でも使用できますが、推奨されません。データとメソッドを setup 関数に記述して渡すことを推奨します
    • return 戻るには、テンプレート内で直接
を使用できます (通常、セットアップを非同期関数にすることはできません)。

2.2.setup() 初めての体験App.vue
<template>
    <h1 @click="say()">{{ msg }}</h1>
</template>
<script>
    export default {
        setup() {
            const msg = &#39;Hello Vue3&#39;
            const say = () => {
                console.log(msg)
            }
            return { msg, say }
        },
    }
</script>
ログイン後にコピー

エフェクト ビュー:

注: vue2 の data() およびメソッドと同様に、これらは結果として呼び出す前に、戻り値として書き込む必要があります。 vue3 での setup() 関数と reactive() 関数の使用の簡単な分析

[インタビューのちょっとした質問の補足] セットアップで返されるオブジェクトは 1 つだけでなければなりませんか? (セットアップはレンダリング関数を返すこともできます)

App.vue

<script>
    import { h } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            return () => h(&#39;h2&#39;, &#39;Hello Vue3&#39;)
        },
    }
</script>
ログイン後にコピー

コンソールは h2 タグを含む Hello Vue3 を出力します。

2.3.reactive() 関数 reactive 関数を使用して、配列を応答性の高いデータにラップします。 reactive は、通常のオブジェクト/配列を reactive データにラップして使用するために使用される関数ですが、基本的なデータ型を直接処理することはできません (Proxy に基づいており、Proxy はオブジェクトをプロキシすることしかできないため)。

たとえば、「クリックして現在の行情報を削除する」という要件がある場合、

App.vue

<template>
    <ul>
        <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
    </ul>
</template>

<script>
    export default {
        name: &#39;App&#39;,
        setup() {
            const arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
            const removeItem = (index) => {
                arr.splice(index, 1)
            }
            return {
                arr,
                removeItem,
            }
        },
    }
</script>
ログイン後にコピー

vueTools で表示すると、データはその後削除されます。クリックします。しかし、ページ上には実際のレンダリングはありません。

この時点で、reactive() を使用して配列をラップし、応答性の高いデータにします。インポートすることを忘れないでください

<template>
    <ul>
        <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
    </ul>
</template>

<script>
    import { reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const arr = reactive([&#39;a&#39;, &#39;b&#39;, &#39;c&#39;])
            const removeItem = (index) => {
                arr.splice(index, 1)
            }
            return {
                arr,
                removeItem,
            }
        },
    }
</script>
ログイン後にコピー
vue3 での setup() 関数と reactive() 関数の使用の簡単な分析

現在、ページは応答性があり、クリックされると削除され、ページも応答性になります

vue3 での setup() 関数と reactive() 関数の使用の簡単な分析同様に、reactive() を使用してオブジェクトをラップして使用します

<template>
    <form @submit.prevent="handleSubmit">
        <input type="text" v-model="user.id" />
        <input type="text" v-model="user.name" />
        <input type="submit" />
    </form>
    <ul>
        <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
    </ul>
</template>

<script>
    import { reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const state = reactive({
                arr: [
                    {
                        id: 0,
                        name: &#39;ifer&#39;,
                    },
                    {
                        id: 1,
                        name: &#39;elser&#39;,
                    },
                    {
                        id: 2,
                        name: &#39;xxx&#39;,
                    },
                ],
            })
            const removeItem = (index) => {
                // 默认是递归监听的，对象里面任何一个数据的变化都是响应式的
                state.arr.splice(index, 1)
            }

            const user = reactive({
                id: &#39;&#39;,
                name: &#39;&#39;,
            })
            const handleSubmit = () => {
                state.arr.push({
                    id: user.id,
                    name: user.name,
                })
                user.id = &#39;&#39;
                user.name = &#39;&#39;
            }
            return {
                state,
                removeItem,
                user,
                handleSubmit,
            }
        },
    }
</script>
ログイン後にコピー

vue3 での setup() 関数と reactive() 関数の使用の簡単な分析上記のコードの解釈:

v-model を通じて入力ボックスとイベントの削除と追加の操作を定義しました双方向バインディング データを押して、データの追加と削除を完了します。
これで、setup() の使用法がより明確に理解できましたか?以下に書き方を簡略化してみましょう。


2.3.1 reactive() のさらなる抽出最適化: 同じ関数のデータとビジネス ロジックを 1 つの関数、コードに抽出します。読みやすく、再利用しやすくなります。 
<template>
    <form @submit.prevent="handleSubmit">
        <input type="text" v-model="user.id" />
        <input type="text" v-model="user.name" />
        <input type="submit" />
    </form>
    <ul>
        <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
    </ul>
</template>

<script>
    import { reactive } from &#39;vue&#39;
    function useRemoveItem() {
        const state = reactive({
            arr: [
                {
                    id: 0,
                    name: &#39;ifer&#39;,
                },
                {
                    id: 1,
                    name: &#39;elser&#39;,
                },
                {
                    id: 2,
                    name: &#39;xxx&#39;,
                },
            ],
        })
        const removeItem = (index) => {
            state.arr.splice(index, 1)
        }
        return { state, removeItem }
    }
    function useAddItem(state) {
        const user = reactive({
            id: &#39;&#39;,
            name: &#39;&#39;,
        })
        const handleSubmit = () => {
            state.arr.push({
                id: user.id,
                name: user.name,
            })
            user.id = &#39;&#39;
            user.name = &#39;&#39;
        }
        return {
            user,
            handleSubmit,
        }
    }
    export default {
        name: &#39;App&#39;,
        setup() {
            const { state, removeItem } = useRemoveItem()
            const { user, handleSubmit } = useAddItem(state)
            return {
                state,
                removeItem,
                user,
                handleSubmit,
            }
        },
    }
</script>
ログイン後にコピー

将方法抽离出来，用类似于导入的方式进行一个抽离，将数据与方法放在一起，便于我们的统一管理。

2.3.2reactive()再进行进一步文件拆分并且引入

vue3 での setup() 関数と reactive() 関数の使用の簡単な分析

App.vue

<template>
  <form >
      <input type="text" v-model="user.id" />
      <input type="text" v-model="user.name" />
      <button type="submit" @click.prevent="submit">提交</button>
  </form>
  <ul>
      <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
  </ul>
</template>

<script>
import {useRemoveItem,handleSubmit} from &#39;./hooks&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const { state, removeItem } = useRemoveItem()
          const { user, submit } = handleSubmit(state)
          return {
              state,removeItem,user,submit
          }
      },
  }
</script>
ログイン後にコピー

hooks/index.js

import { reactive } from &#39;vue&#39;
export const useRemoveItem=()=> {
  const state= reactive( {
          arr: [
                    {
                        id: 0,
                        name: &#39;ifer&#39;,
                    },
                    {
                        id: 1,
                        name: &#39;elser&#39;,
                    },
                    {
                        id: 2,
                        name: &#39;xxx&#39;,
                    },
                ]
              })
  const removeItem=(index)=>{
      state.arr.splice(index,1)
            console.log(state.arr);
          }
      return { state, removeItem }
}
export const handleSubmit=(state)=>{
  const user = reactive({
                id: &#39;&#39;,
                name: &#39;&#39;,
            })
            console.log(1);
  const submit = () => {
       state.arr.push({
        ...user
       })
       user.id = &#39;&#39;
       user.name = &#39;&#39;
            }
      return { user, submit }
}
ログイン後にコピー

（学习视频分享：vuejs入门教程、编程基础视频）

以上がvue3 での setup() 関数と reactive() 関数の使用の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
vue javascript
ソース：csdn.net
前の記事：Vue を知らなくても大丈夫ですが、Proxy の使用方法は知っておく必要があります。 次の記事：chatgpt のタイプライター効果を実現する vue3 の詳細な例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート