vue3-(watchEffect,高级帧听器)

1.watchEffect：会自动调用一次，具有惰性；

<template>
  <div>{{ obj.name }}</div>
  <div>{{ obj.age }}</div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue';
let obj = reactive({
  name: '张三',
  age: 18
});
let msg = ref(100);
//当变量修改时就会触发：watchEffect
//watchEffect:返回一个函数，调用时会停止更新
const stop = watchEffect(
  (oninvalidate) => {
    console.log('msg:' + msg.value);
    //在watchEffect调用之前调用oninvalidate
    oninvalidate(() => {
      console.log('oninvalidate');
    });
    console.log('msg:' + msg.value);
  },
  {
    flush: 'post'
  }
);
//停止调用watchEffect
stop();

setInterval(() => {
  msg.value += 10;
}, 1000);

obj.age++;
</script>