ホームページ >ウェブフロントエンド >Vue.js >vue3 で watch と computed を使用する方法について話しましょう

vue3 で watch と computed を使用する方法について話しましょう

青灯夜游
青灯夜游転載
2023-04-14 15:04:441529ブラウズ

この記事は、vue3 を学習し、計算プロパティとリスナー ウォッチの使用方法について詳しく説明するのに役立ちます。皆様のお役に立てれば幸いです。

vue3 で watch と computed を使用する方法について話しましょう

#1. 見てください

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 と computed を使用する方法について話しましょう

変更しないように注意してください

#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 複数の参照データを監視する
フォームで年齢と番号の変化を同時に監視できます。配列の。

<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 と computed を使用する方法について話しましょう

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 と computed を使用する方法について話しましょう

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 と computed を使用する方法について話しましょう

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

  • `

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

    watch(
        obj,
        (newValue, oldValue) => {
            console.log(newValue, oldValue)
            console.log(newValue === oldValue)
        },
        {
            deep: true,
        }
    )
  • 文を追加するだけなので、スクリーンショットはありません

解決策 3: ref.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 と computed を使用する方法について話しましょう共通データの監視

応答オブジェクト内の共通属性値の監視は、関数を返すことによって行う必要があります (返された場合は、オブジェクト/応答オブジェクト、内部データを変更するには詳細な監視をオンにする必要があります)。
  • <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 関数: 計算関数は、計算プロパティを定義するために使用されます。上記の基本概念は同じです。 as vue2 はい、vue2 の 2 つの知識ポイントの定義に進むことができます: [vue2] 計算とリスニングの使用法

<template>
  <p>firstName: {{ person.firstName }}</p>
  <p>lastName: {{ person.lastName }}</p>
  <input type="text" v-model="person.fullName" />
</template>
<script>
  import { computed, reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const person = reactive({
              firstName: &#39;初&#39;,
              lastName: &#39;映&#39;,
          })
          // 也可以传入对象,目前和上面等价
          person.fullName = computed({
              get() {
                  return person.firstName + &#39;*&#39; + person.lastName
              },
              set(value) {
                console.log(value,&#39;value&#39;);//为上述get的返回值
                  const newArr = value.split(&#39;*&#39;)
                  person.firstName = newArr[0]
                  person.lastName = newArr[1]
              },
          })
          return {
              person,
          }
      },
  }
</script>

(学習ビデオ共有: vue3 で watch と computed を使用する方法について話しましょうvuejs 入門チュートリアル

基本プログラミング ビデオ)

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

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。