vue3におけるwatchとwatchEffectの使用例の分析

王林
リリース: 2023-05-12 21:43:04
転載
925 人が閲覧しました
    ##watch

    watch は単一のデータを監視します

    <template>
        <input type="text" v-model="text1" />
    </template>
    
    <script setup>
    import { ref, watch } from &#39;vue&#39;
    const text1 = ref(&#39;&#39;)
    
    watch(text1, (newVal, oldVal) => {
        console.log(&#39;监听单个数据&#39;, newVal, oldVal)
    })
    </script>
    ログイン後にコピー

    watch は複数のデータを監視します

    <template>
        <input type="text" v-model="text1" />
        <input type="text" v-model="text2" />
    </template>
    
    <script setup>
    import { ref, watch } from &#39;vue&#39;
    const text1 = ref(&#39;&#39;)
    const text2 = ref(&#39;&#39;)
    
    watch([text1, text2], (newVal, oldVal) => {
        console.log(&#39;监听一组数据&#39;, newVal, oldVal)
    })
    </script>
    ログイン後にコピー

    watch listen オブジェクト

    <template>
        name: <input type="text" v-model="student.name" />
        age: <input type="number" v-model="student.age" />
    </template>
    <script setup>
    import { reactive, watch } from &#39;vue&#39;
    const student = reactive({
        name: &#39;&#39;,
        age: &#39;&#39;
    })
    watch(student, (newVal, oldVal) => {
        console.log(&#39;newVal&#39;, newVal)
        console.log(&#39;oldVal&#39;, newVal)
    })
    </script>
    ログイン後にコピー

    watch3 番目のパラメータ deepimmediate もあり、効果を確認するために追加できます

    watch 監視オブジェクト特定の値

    <template>
        name: <input type="text" v-model="student.name" />
        age: <input type="number" v-model="student.age" />
    </template>
    <script lang="ts" setup>
    import { reactive, watch } from &#39;vue&#39;
    const student = reactive({
        name: &#39;&#39;,
        age: &#39;&#39;
    })
    watch(() => student.name, (newVal, oldVal) => {
        console.log(&#39;newVal&#39;, newVal)
        console.log(&#39;oldVal&#39;, newVal)
    }, {
        deep: true,
        immediate: true
    })
    </script>
    ログイン後にコピー

    オブジェクトの特定のプロパティを監視する場合は、アロー関数

    watchEffect

    About

    を使用する必要があります。 watchEffect、公式 Web サイトでは次のように紹介されています。応答状態に基づいて副作用を自動的に適用および再適用するには、受信した関数をすぐに実行する watchEffect メソッドを使用できます。依存関係を応答的に追跡し、依存関係を更新しながら、変更時にこの関数を再実行します。つまり、特定の依存関係ソースを渡す必要はなく、コールバック関数が即座に実行され、関数が副作用を生成した場合は、副作用の依存関係を自動的に追跡し、応答ソースを自動的に分析します。見ただけでは概念が曖昧かもしれません。最初に最も単純な例を見てみましょう:

    <template>
        name: <input type="text" v-model="student.name" />
        age: <input type="number" v-model="student.age" />
    </template>
    
    <script lang="ts" setup>
    import { reactive, watchEffect } from &#39;vue&#39;
    
    const student = reactive({
        name: &#39;&#39;,
        age: &#39;&#39;
    })
    watchEffect(() => {
        console.log(&#39;name: &#39;,student.name, &#39;age: &#39;, student.age)
    })
    </script>
    ログイン後にコピー

    watchEffect Side Effects

    Side Effects では、副作用とは何ですか? 実際、それは監視する前に、やるべきことが 1 つあります。

    <template>
        name: <input type="text" v-model="student.name" />
        age: <input type="number" v-model="student.age" />
    
        <h3>{{student.name}}</h3>
    </template>
    
    <script lang="ts" setup>
    import { reactive, watchEffect } from &#39;vue&#39;
    
    const student = reactive({
        name: &#39;&#39;,
        age: &#39;&#39;
    })
    watchEffect((oninvalidate) => {
        oninvalidate(() => {
            student.name = &#39;张三&#39;
        })
        console.log(&#39;name: &#39;, student.name)
    }, {
        // pre 组件更新前; sync:强制效果始终同步; post:组件更新后执行
        flush: &#39;post&#39;  // dom加载完毕后执行
    })
    </script>
    ログイン後にコピー

    監視する前に、

    student.name に値「Zhang San」を割り当てます。どのような値を入力しても、name は常に「Zhang San」になります。

    リスニングの停止

    同期ステートメントを使用して作成したリスナーは、コンポーネント インスタンスに自動的にバインドされ、コンポーネントがアンインストールされると自動的に停止します。ただし、非同期コールバックでリスナーを作成すると、 , その場合、現在のコンポーネントにバインドされなくなり、メモリ リークを防ぐために手動で停止する必要があります。では、これを停止するにはどうすればよいでしょうか? 実際には、

    watch または watchEffect

    const stop = watchEffect(() => {})
    
    // 停止监听
    unwatch()
    ログイン後にコピー
    Difference

    によって返される関数を呼び出すだけで済みます。一度使用してください。

    watchwatchEffect を確認したところ、次の主な違いがあることがわかりました。

    • watch は遅延実行されます。 while watchEffect いいえ、watch の 3 番目の構成パラメータを考慮しないと、コンポーネントが初めて実行されるときは watch は実行されません。 watchEffect は、ここでプログラムが実行されるとすぐに実行され、依存関係の変更に応じて実行されます。

    • watch監視オブジェクト watchEffect必須ではありません

    以上がvue3におけるwatchとwatchEffectの使用例の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル:
    ソース:yisu.com
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート