vue3에서 watch 및 계산을 사용하는 방법에 대해 이야기해 보겠습니다.

이 글은 vue3을 배우고 계산된 속성과 청취자 감시를 사용하는 방법에 대해 심도 있게 이야기하는 데 도움이 될 것입니다.

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 비디오 튜토리얼, 웹 프론트엔드 개발]

<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>

Reactive 자체를 수정하지 마세요. 수정 자체는 실행되지 않습니다

2. ref data

• 2.1 하나의 ref 데이터 모니터링

<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 여러 ref 데이터 모니터링

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>

모니터링 속성 즉시 트리거:

                {
                    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>

심층 모니터링 참조 데이터 활성화

? 问题：修改 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>

트리거되지 않는 시계에 직면하면 세 가지 솔루션이 있습니다.

• 해결 방법 1 : 물론 전체 개체를 직접 수정하면 반드시 모니터링됩니다. (템플릿에서 obj를 수정하는 것은 obj.value를 수정하는 것과 동일하다는 점에 유의하세요.)
  -`

  {{ obj.hobby.eat }}

`

• 해결책 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>

• 공통 데이터 모니터링
  반응형 개체의 공통 속성 값 모니터링은 함수에 의해 반환되어야 합니다(개체/반응형 개체가 반환된 경우 내부 데이터를 수정하려면 심층 모니터링을 활성화해야 합니다).

<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. 계산된 함수는 계산된 속성을 정의하는 데 사용됩니다. 위의 기본 개념은 vue2의 두 지식 포인트 정의와 동일합니다. 【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>

(학습 영상 공유: vuejs 입문 튜토리얼

,

기본 프로그래밍 영상)

위 내용은 vue3에서 watch 및 계산을 사용하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!