Vue3에서 watchEffect 리스너를 사용하는 방법

watchEffect Listener

사실 이건 필요 없을 것 같아요, 하하하하하!

말하자면 watch와 watchEffect의 기능은 동일하다고 이해하시면 됩니다.

watch: 지정된 종속성 소스를 표시하고 종속성 소스가 업데이트되면 콜백 함수를 실행합니다.
watchEffect: 종속성 소스를 자동으로 수집하고 종속성 소스가 업데이트되면 자체적으로 다시 실행됩니다. watch：显示指定依赖源，依赖源更新时执行回调函数。
watchEffect：自动收集依赖源，依赖源更新时候重新执行自身。

• watchEffect 如果存在的话，组件初始化的时候就会自动自行一次，不需要像 watch 一样设置立即执行。

• watch 每次回调之后是可以获取到最新值和上一次的老值，但是 watchEffect 是拿不到的。

• watchEffect 不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。

• 使用的时候也是需要引入。

• 记住一点哈， watch 可以代替 watchEffect，但是 watchEffect 不能替代 watch。

总结：能用 watch 就不要用 watchEffect。

watchEffect 侦听器使用

首先我们写一个简单的 watchEffect 侦听器。

<template>
  <div>
    <h2>{{name}}</h2>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是????????.");

    function btn() {
      name.value = "????????.";
    }

    const res = watchEffect(() => {
      console.log("watchEffect 执行了");
    });

    return { name, btn };
  }
};
</script>

记住 watchEffect 使用也是需要先引入的，不然不好使哈，然后我们保存上面的代码，然后刷新页面看一下执行结果。

我们发现哈，我们一刷新页面，控制台直接打印了我们输出的内容，所以说呢，watchEffect 组件一加载完就会执行。

watchEffect 监听基本数据

我们看到，watchEffect 使用的时候并没有设置监听哪个参数，只有一个回调函数，因为他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行。

比如我们监听 name 的情况。

<template>
  <div>
    <h2>{{name}}</h2>
    <button @click="btn">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  name: "App",
  setup() {
    const name = ref("我是????????.");

    function btn() {
      name.value = "????????.";
    }

    const res = watchEffect(() => {
      console.log(name.value);
    });

    return { name, btn };
  }
};
</script>

我们在回调函数打印一下 name 的值。

watchEffect 监听复杂数据

上面的案例是用来监听一个基本数据，如果监听一个对象呢？

其实也是一样的哈。

<template>
  <div>
    <h2>{{boy.age}}</h2>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log(boy.age);
    });

    return { boy };
  }
};
</script>

上边代码呢，一个按钮，每次点击让 boy 对象里面的 age 加一操作，然后监听一下 age 的新值

可以看到是完全没有问题的哈！

watchEffect 啥时候执行

上边说过了哈，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。

啥意思呢，简单理解一下，就是回调里面使用了的话他就执行，没用他就不执行。

就像上面的案例，修改 age 的时候，我们在回调里面打印了 age，在回调里面涉及到 age 了，他就会执行，如果我们这次不使用改变的 age，只打印一句话，看一下能不能执行回调哈。

<template>
  <div>
    <h2>{{boy.age}}</h2>
    <button @click="boy.age++">修改name</button>
  </div>
</template>

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() => {
      console.log("执行了");
    });

    return { boy };
  }
};
</script>

刷新保存，点击按钮修改 age 的值，看一下控制台有没有打印 执行了

• watchEffect 컴포넌트가 존재하면 초기화 시 컴포넌트가 한 번 자동으로 실행됩니다. Watch처럼 즉시 실행되도록 설정할 필요가 없습니다.

• watch는 각 콜백 후에 최신 값과 마지막 이전 값을 얻을 수 있지만 watchEffect는 이를 얻을 수 없습니다.

• watchEffect는 모니터링할 속성을 지정할 필요가 없습니다. 콜백에서 반응형 속성을 사용하는 한 콜백은 이러한 속성이 변경된 후에 실행됩니다. 지정된 속성만 모니터링할 수 있는 시계입니다.

• 사용시에도 소개가 필요합니다.

• 시계는 watchEffect를 대체할 수 있지만 watchEffect는 시계를 대체할 수 없다는 점을 기억하세요.

요약: watch를 사용할 수 있다면 watchEffect를 사용하지 마세요.

watchEffect 리스너 사용법🎜🎜먼저 간단한 watchEffect 리스너를 작성합니다. 🎜

    const res = watchEffect(() => {
      console.log(boy.age);
    });

🎜 watchEffect를 먼저 도입해야 한다는 점을 기억하세요. 그렇지 않으면 사용하기 어려울 것입니다. 그런 다음 위의 코드를 저장한 다음 페이지를 새로 고쳐서 실행 결과를 확인합니다. 🎜🎜페이지를 새로 고치자마자 출력한 콘텐츠가 콘솔에 직접 인쇄되므로 watchEffect 구성 요소가 로드되자마자 실행된다는 사실을 발견했습니다. 🎜🎜watchEffect는 기본 데이터를 모니터링합니다.🎜🎜watchEffect를 사용할 때 모니터링할 설정된 매개 변수는 없고 콜백 함수가 하나만 있음을 알 수 있습니다. 콜백에서 반응형 속성을 사용하는 한 이러한 속성은 자동으로 수집되기 때문입니다. 콜백은 변경 후에 실행됩니다. 🎜🎜예를 들어 이름을 모니터링할 때. 🎜

res()  // 关闭

🎜콜백 함수에 name 값을 출력합니다. 🎜🎜watchEffect는 복잡한 데이터를 모니터링합니다🎜🎜위의 경우는 기본 데이터를 모니터링하는 데 사용됩니다. 🎜🎜사실 똑같습니다. 🎜

<script>
import { ref, watchEffect, reactive } from "vue";
export default {
  name: "App",
  setup() {
    const boy = reactive({
      name: "我是????????.",
      age: 10
    });

    const res = watchEffect(() =&gt; {
      console.log(boy.age);
    });

    res()  // 关闭监听

    return { boy };
  }
};
</script>

🎜위 코드는 클릭할 때마다 boy 객체의 나이에 1을 추가하는 버튼이고, 이후 새로운 age 값을 모니터링하는 버튼입니다🎜🎜 전혀 문제가 없음을 알 수 있습니다! 🎜🎜watchEffect는 언제 실행되나요? 위에서 언급한 것처럼 콜백에 반응형 속성을 사용하는 한 지정된 속성만 모니터링할 수 있는 watch와 달리 이러한 속성이 변경된 후에 콜백이 실행됩니다. 🎜🎜무슨 뜻인가요? 간단히 이해하면 콜백에 사용하면 실행되지 않습니다. 🎜🎜위의 경우와 마찬가지로 나이를 수정할 때 콜백에 나이를 인쇄합니다. 콜백에 나이가 포함되어 있으면 이번에는 변경된 나이를 사용하지 않으면 한 문장만 인쇄됩니다. 콜백을 곧 실행할 수 있나요?를 참조하세요. 🎜rrreee🎜새로 고침하고 저장한 후 버튼을 클릭하여 age 값을 수정하고 executed 세 단어가 콘솔에 인쇄되는지 확인하세요. 🎜🎜그 문장을 이해하셨나요? 언제 처형됐는지 아시나요? 좋아요. 🎜🎜watchEffect 모니터링 끄기🎜🎜watchEffect 모니터링을 사용한다고 가정해 봅시다. 그런데 지금 모니터링을 원하지 않으면 어떻게 해야 하나요? 실제로는 매우 간단합니다. 🎜rrreee🎜위에서 watchEffect 리스너를 만들지 않았나요? 닫으려면 한 번만 호출하면 닫힙니다. 🎜rrreee🎜아래의 구체적인 코드를 확인하세요. 🎜rrreee🎜저장하고 버튼을 눌러 효과를 확인해 보세요. 🎜

위 내용은 Vue3에서 watchEffect 리스너를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!