vue3 watchEffect 的使用

<template>
  <input type="text" v-model="message">
  <input type="text" v-model="message2">
</template>
<script setup lang="ts">


import {reactive, ref, watch, watchEffect} from "vue";

let message = ref<String>("Hello ");
let message2 = ref<String>(" World");
watchEffect(() => {
  console.log(message.value, message2.value);
});
</script>

当用到那个ref数据的时候 就会被监听到。不用则不会被监听。非常的时尚。

如果要在之前做一些操作

清除副作用

<template>
  <input type="text" v-model="message">
  <input type="text" v-model="message2">
</template>
<script setup lang="ts">


import {reactive, ref, watch, watchEffect} from "vue";

let message = ref<String>("Hello ");
let message2 = ref<String>(" World");
watchEffect((onCleanup) => {
  console.log(message.value, message2.value);
  onCleanup(() => {
    console.log("before");
  });
});
</script>

停止监听事件

<template>
  <input type="text" v-model="message">
  <input type="text" v-model="message2">
  <button @click="stopWatch">停止监听</button>
</template>
<script setup lang="ts">


import {reactive, ref, watch, watchEffect} from "vue";

let message = ref<String>("Hello ");
let message2 = ref<String>(" World");
const stop = watchEffect((oninvalidate) => {
  console.log(message.value, message2.value);
  oninvalidate(() => {
    console.log("before");
  });
});
const stopWatch = () => stop();
</script>

赋值新变量给stop 然后直接调用方法就可以停止下来。

 

 

<template>
  <input id="ipt" type="text" v-model="message">
  <input type="text" v-model="message2">
  <button @click="stopWatch">停止监听</button>
</template>
<script setup lang="ts">


import {reactive, ref, watch, watchEffect} from "vue";

let message = ref<String>("Hello ");
let message2 = ref<String>(" World");
const stop = watchEffect((oninvalidate) => {
  let ipt: HTMLInputElement = document.getElementById("ipt") as HTMLInputElement;
  // console.log(message.value, message2.value);
  console.log(ipt, "e11111");
  oninvalidate(() => {
    console.log("before");
  });
}, {flush: "post"});
const stopWatch = () => stop();
</script>