Vue3 watch和watchEffect的使用

watch 和 watchEffect 都是在vue3中用来监听数据的或者某个值的变化时使用的，但使用方法都有所不同和场景都有所不同，这边带着大家体验一遍

watch

普通数据类型watch 监听

<script setup lang="ts">
import {ref, watch,watchEffect} from "vue";
let num = ref(20);

// watch(要监听的响应式数据，(新值,旧值)=>{})
// 要写需要监听的数据
 watch(num, (newVal, oldVal) => {
   console.log(newVal, oldVal);
})

</script>

引用数据类型watch 监听 ,写成两个函数的形式

<script setup lang="ts">
import {reactive,ref,watch, watchEffect} from "vue";
const state = reactive({
  age: 30,
});

//watch(要监听的响应式数据，(新值,旧值)=>{})
 watch(() => state.age, (newVal, oldVal) => {
   console.log(newVal, oldVal);
 })

</script>

watchEffect

watchEffect 只要是写在里面的数据都会立即监听，如有数据需要做监听判断建议写在这里

<script setup lang="ts">
import {reactive,ref, watch, watchEffect,} from "vue";
let num = ref(20);
const state = reactive({
  age: 30,
});

// 在页面刷新的时候立即监听
watchEffect(() => {
  // 凡是写在这里的数据，只要发生变化，都会触发这里的代码
  console.log("watchEffect", state.age);
});
</script>