vue3的watchEffect和watch简单快速理解

watch

这个和vue2中的监听区别不大，直接看代码就可以理解，写一个简单那的案例，监听input框输入值的变化

<template>
  <div>
    <input type="number" v-model="data.inputValue" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, watch, watchEffect } from "vue";
interface listTypt {
  inputValue: string;
}
const data: listTypt = reactive({
  inputValue: "",
});
// 可以写多个监听
watch(()=>data.inputValue,(newValue,oldValue)=>{
   console.log(newValue,oldValue);
})
</script>

watchEffect

watchEffect该方法会立即执行

<template>
  <div>
    <input type="number" v-model="data.inputValue" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, watch, watchEffect } from "vue";
interface listTypt {
  inputValue: string;
}
const data: listTypt = reactive({
  inputValue: "",
});
const watchIndex = watchEffect(() => {
   const v = data.inputValue;
   console.log(v);
});
</script>

watchEffect停止监听

<template>
  <div>
    <input type="number" v-model="data.inputValue" />
    // 比如点击按钮停止监听
    <button @click="stopClick">点击</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, watch, watchEffect } from "vue";
interface listTypt {
  inputValue: string;
}
const data: listTypt = reactive({
  inputValue: "",
});
const watchIndex = watchEffect(() => {
   const v = data.inputValue;
   console.log(v);
});
const stopClick=()=>{
    // 调用这个方法就会停止监听
    watchIndex()
}
</script>

ps:最近刚开始学，这也只是自己的一点点理解，如果有问题欢迎指正。