コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > Vue.js > 本文

vue3でwatchと計算を使用する方法

PHPz
リリース： 2023-05-20 22:16:04
転載
958 人が閲覧しました

1. watch

1. リアクティブ内部データの検出

<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = &#39;面条&#39;">click</button>
</template>

<script>
  import { watch, reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;ifer&#39;,
              hobby: {
                  eat: &#39;西瓜&#39;,
              },
          })
          watch(obj, (newValue, oldValue) => {
              // 注意1：监听对象的时候，新旧值是相等的
              // 注意2：强制开启深度监听，配置无效
              console.log(&#39;触发监听&#39;);
              console.log(newValue === oldValue) // true
          })

          return { obj }
      },
  }
</script>
ログイン後にコピー

注: リアクティブ自体については、変更が行われます。トリガー監視ではありません。 [関連する推奨事項: vuejs ビデオ チュートリアル、Web フロントエンド開発] 

<template>
    <p>{{ obj.hobby.eat }}</p>
    <button @click="obj.hobby = { eat: &#39;面条&#39; }">click</button>
</template>

<script>
    import { watch, reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = reactive({
                name: &#39;ifer&#39;,
                hobby: {
                    eat: &#39;西瓜&#39;,
                },
            })
            watch(obj.hobby, (newValue, oldValue) => {
                // obj.hobby = { eat: &#39;面条&#39; }
                console.log(&#39;对 reactive 自身的修改不会触发监听&#39;)
            })
            return { obj }
        },
    }
</script>
ログイン後にコピー

vue3でwatchと計算を使用する方法

reactive 自体は変更できず、変更自体は変更されないことに注意してください。トリガー

#2. 参照データの監視

    ##2.1 参照データの監視

  • ##

    <template>
  <p>{{ age }}</p>
  <button @click="age++">click</button>
</template>

<script>
  import { watch, ref } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const age = ref(18)
          // 监听 ref 数据 age，会触发后面的回调，不需要 .value
          watch(age, (newValue, oldValue) => {
              console.log(newValue, oldValue)
          })

          return { age }
      },
  }
</script>
    ログイン後にコピー

2.2 複数の参照データの監視

    • #age と num の変化を配列形式で同時に監視できます。 
<template>
    <p>age: {{ age }} num: {{ num }}</p>
    <button @click="handleClick">click</button>
</template>

<script>
    import { watch, ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const age = ref(18)
            const num = ref(0)

            const handleClick = () => {
                age.value++
                num.value++
            }
            // 数组里面是 ref 数据
            watch([age, num], (newValue, oldValue) => {
                console.log(newValue, oldValue)
            })

            return { age, num, handleClick }
        },
    }
</script>
ログイン後にコピー

vue3でwatchと計算を使用する方法listen 属性をすぐにトリガーします: 

                {
                    immediate: true,
                }
ログイン後にコピー
<template>
    <p>{{ age }}</p>
    <button @click="handleClick">click</button>
</template>

<script>
    import { watch, ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const age = ref(18)

            const handleClick = () => {
                age.value++
            }

            watch(
                age,
                (newValue, oldValue) => {
                    console.log(newValue, oldValue) // 18 undefined
                },
                {
                    immediate: true,
                }
            )

            return { age, handleClick }
        },
    }
</script>
ログイン後にコピー

vue3でwatchと計算を使用する方法 ref データの詳細モニタリングをオンにする

? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下
ログイン後にコピー
<template>
    <p>{{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = &#39;面条&#39;">修改 obj.hobby.eat</button>
</template>

<script>
    import { watch, ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = ref({
                hobby: {
                    eat: &#39;西瓜&#39;,
                },
            })
            // 注意：ref 监听对象，默认监听的是这个对象地址的变化
            watch(obj, (newValue, oldValue) => {
                console.log(newValue === oldValue)
            })

            return { obj }
        },
    }
</script>
ログイン後にコピー

ウォッチがトリガーされない状況に直面した場合、3 つの解決策があります:

vue3でwatchと計算を使用する方法

解決策 1: もちろん、オブジェクト全体を直接変更すると、確実に監視されます (テンプレート内の obj の変更は、obj.value の変更と同等であることに注意してください)。
    -`

  • {{ obj.hobby.eat }}

    `

vue3でwatchと計算を使用する方法##解決策 2: 参照データの詳細なモニタリングを有効にします。 

  • watch(
    obj,
    (newValue, oldValue) => {
        console.log(newValue, oldValue)
        console.log(newValue === oldValue)
    },
    {
        deep: true,
    }
)
    ログイン後にコピー

    文を追加するだけなので、スクリーンショットはありません

解決策 3: 参考資料を聞くこともできます.value を使用すると、同じ効果が得られます。

  • オブジェクトが ref 内にラップされている場合、実際には reactive で実装されており、これは isReactive メソッドで証明できます。 
<template>
    <p>{{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = &#39;面条&#39;">修改 obj</button>
</template>

<script>
    import { watch, ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = ref({
                hobby: {
                    eat: &#39;西瓜&#39;,
                },
            })
            watch(obj.value, (newValue, oldValue) => {
                console.log(newValue, oldValue)
                console.log(newValue === oldValue)
            })

            return { obj }
        },
    }
</script>
ログイン後にコピー

vue3でwatchと計算を使用する方法共通データのモニタリング

応答オブジェクトの共通属性値のモニタリングは、関数によって返される必要があります (オブジェクトの場合) /応答オブジェクトが返される場合、内部データを変更するには詳細な監視を有効にする必要があります)。 

  • <template>
    <p>{{ obj.hobby.eat }}</p>
    <button @click="obj.hobby.eat = &#39;面条&#39;">修改 obj</button>
</template>

<script>
    import { watch, reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const obj = reactive({
                hobby: {
                    eat: &#39;西瓜&#39;,
                },
            })
            // 把 obj.hobby 作为普通值去进行监听，只能监听到 obj.hobby 自身的变化
            /* watch(
      () => obj.hobby,
      (newValue, oldValue) => {
        console.log(newValue, oldValue)
        console.log(newValue === oldValue)
      }
    ) */
            // 如果开启了深度监听，则能监听到 obj.hobby 和内部数据的所有变化
            /* watch(
      () => obj.hobby,
      (newValue, oldValue) => {
        console.log(newValue, oldValue)
        console.log(newValue === oldValue)
      },
      {
        deep: true,
      }
    ) */
            // 能监听影响到 obj.hobby.eat 变化的操作，例如 obj.hobby = { eat: &#39;面条&#39; } 或 obj.hobby.eat = &#39;面条&#39;，如果是 reactive 直接对 obj 的修改则不会被监听到（ref 可以）
            watch(
                () => obj.hobby.eat,
                (newValue, oldValue) => {
                    console.log(newValue, oldValue)
                    console.log(newValue === oldValue)
                }
            )
            return { obj }
        },
    }
</script>
    ログイン後にコピー

    2. computed

    関数: computed 関数は、計算されたプロパティを定義するために使用されます。上記の基本的な概念は vue2 と同じです。 vue2 の次の 2 つの知識ポイントの定義に進むことができます: [vue2] 計算とリスニングの使用法。 rreeee

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

関連ラベル：
vue3 computed watch
ソース：yisu.com
前の記事：Vue3+TS+Vant3+Piniaの設定方法 次の記事：vue3でreadonlyをレスポンシブに実装する方法は何ですか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Vue3 Webコンポーネントのプロダクションビルドの問題を解決する vue2web コンポーネントを vue3 に移行しようとしていますが、運用用のビルドを作成するときに問題が発生します。 --targetwc を指定して vue-cli を使用し...
から 2024-04-06 12:43:37
0
1
473
Vite/Vue 3: 画像ソースをプロップとして使用する場合の「未定義の要件」 VueCLIからViteCLIに、Vue3のCompositionAPIからSFCScriptsetupAPIに切り替えました。公式 VueCLI を使用したときは、次のように p...
から 2024-04-06 09:50:25
0
1
353
折りたたまれたアコーディオン セグメントの高さを制限する Bootstrap 5 Vue3 Vue3とbootstrap5を使用してWebアプリケーションを構築しています。しかし、この質問はブートストラップのみに関するものだと思います。私がやりたいのは、コンテンツが長いと...
から 2024-03-31 21:56:54
0
1
332
Vue3.js) エラー: モジュール「firebase」が見つかりません 初めて vue.js で firebase を使用しました。 npmでfirebaseをインストールした後、以下のようにmain.jsに追加しました。 //main.jsimpor...
から 2024-03-31 19:01:32
0
1
304
CSS.registerProperty() のプロパティ値を取得する方法を学習します。 CSS.registerProperty メソッドを使用してプロパティを登録しました。問題は、同じコンポーネントをロードすると、そのようなプロパティがすでに存在するために DOME...
から 2024-03-30 22:12:33
0
1
275
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート