watchEffect

功能和watch大致相当区别是

• 初始化时会自动执行一次和计算属性同理
• 不用传入依赖的数据，自己会主动收集依赖
• watchEffect拿不到oldValue
• watchEffect返回一个可以停止watchEffect的函数句柄可以通过调用此函数停止watch
• watchEffect传入的回调函数会以参数的形式返回一个onInvalidate，onInvalidate(fn)传入的回调会在 watchEffect 重新运行或者 watchEffect 停止的时候执行

<template>
  <div class="page-wrapper">
    <p>-------------------------------shallowReactive--------------------------</p>
    <p>{{stuAge}}</p>
    <button @click="myFn">点我一下</button>
  </div>
</template>
<script lang="js">
import { defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({
  name: 'effect-test',
  setup(){
    let stuAge= ref(0);
    function myFn(){
        stuAge.value++;
    }
    const stop= watchEffect(onInvalidate => {
        console.log('effect enter', stuAge.value);

        //处理watchEffect频繁调用的逻辑
        onInvalidate(()=> {
            console.log('onInvalidate enter');
        })
        if(stuAge.value === 3){
            stop();
        }
    })
    return {
        stuAge,
        myFn
    }
  }
  
})
</script>