vue3.0 watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。
	依赖即为函数中使用的ref/reactive对象的value

用法:
	import { watchEffect } from 'vue'
	
	setup()
	{
		
	    watchEffect(函数(){
	    	使用到了哪个ref/reactive对象.value,就监听哪个
	    })	
	   
	   	(1)停止侦听
	   	
	   	  隐式停止:
	   		当watchEffect在组件的setup()函数或生命周期钩子被调用时,侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。
	   		
	   	  显示停止:
	   	  	const xx=watchEffect(...)
	   	  	xx.stop();
	   	  	
	   	(2)清除副作用
	   		watchEffect传入参数
	   		
			watchEffect((onInvalidate)=>{

		      onInvalidate(()=>{
			      执行时机:
					在副作用即将重新执行时
					如果在setup()或生命周期钩子函数中使用了 watchEffect, 则在卸载组件时
		      })
		
		    })
		    
		 (3)异步副作用
			 watchEffect(async () => {}
		
		(4)副作用需要同步或在组件更新之前
			watchEffect(
			  () => {
					...
			  },
			  {
			    flush: 'sync',    'pre'组件更新前运行
			  }
			)
			
		(5)调试侦听器的行为
			watchEffect(
			  () => {
			    ...
			  },
			  {
			    onTrigger(e) {
			        依赖项变更导致副作用被触发时
			    },
			    onTrack(e){
			    	当一个 reactive对象属性或一个 ref 作为依赖被追踪时触发
			    }
			  }
			)

代码示例:

<template>
  <div>
      <img src="./logo.png">
    <h1>Hello Vue 3!</h1>
    {{name}}{{obj.sex}}
    <button @click="inc">Clicked {{ count }} times.</button>
  </div>

</template>

<script>
import { ref,reactive,computed,readonly,watchEffect } from 'vue'

export default {
  setup() {
    let count = ref(0)
    let res=1;
    let name = ref('jeff')
    const obj=reactive({sex:'male'})
    const robj=readonly(obj); 

    let r=readonly('aa') //不具有只读的能力

    watchEffect((onInvalidate)=>{
      console.log(count.value);
      onInvalidate(()=>{
        console.log('清除');
        clearInterval(timer);
      })

    },  {
    onTrigger(e) {
      console.log(e);
    },
    onTrack(e)
    {
      console.log('triger');
      console.log(e)
    }
  })
    


    const inc = () => {

      timer=setInterval(()=>{
        count.value++;
      },1000)

    }

    return {
      count,
      inc,
      name, //在setup返回对象中自动解套
      obj
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
</style>