vue3.0 watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

用法:
	import { watchEffect } from 'vue'
	
	setup()
	{
		
	    watchEffect(函数(){
	    	依赖追踪：
	    		同步调用：
	    			追踪所有依赖
	    			
	    		异步调用：
	    			只有在第一个 await 正常工作前访问到的 property 才会被追踪。
	    			
	    			如下：只会追踪url.value作为依赖
	    			const response = await fetch(url.value)
					data.value = await response.json()
	    })	
	   
	   	(1)停止侦听
	   	
	   	  隐式停止:
	   		当watchEffect在组件的setup()函数或生命周期钩子被调用时,侦听器会被链接到该组件的生命周期,并在组件卸载时自动停止。
	   		
	   	  显示停止:
	   	  	const xx=watchEffect(...)
	   	  	xx.stop();
	   	  	
	   	(2)清除副作用
	   		watchEffect传入参数
	   		
			watchEffect((onInvalidate)=>{

		      onInvalidate(()=>{
			      执行时机:
					在副作用即将重新执行时
					如果在setup()或生命周期钩子函数中使用了 watchEffect, 则在卸载组件时
		      })
		
		    })
		    
		(3)异步副作用以及清楚
			副作用函数是一个异步函数时,清理函数必须要在Promise被resolve之前被注册,同时Vue依赖这个返回的Promise来自动处理Promise链上的潜在错误
			watchEffect(async () => {
				onInvalidate(() => {
				    /* ... */
				})
				data.value = await fetchData(props.id)
			})
		
		(4)副作用需要同步或在组件更新之前
			watchEffect(
			  () => {
					...
			  },
			  {
			    flush: 'sync',    'pre'在DOM更新前运行,'post'在DOM更新后运行,'sync'强制效果始终同步触发,默认为'pre'
			  }
			)
			
		(5)调试侦听器的行为(只能在开发模式下工作)
			watchEffect(
			  () => {
			    ...
			  },
			  {
			    onTrack(e){
			    	当一个 reactive对象属性或一个 ref 作为依赖被追踪时触发
			    	e.target包含了值
			    	debugger
			    },
			    onTrigger(e) {
			        依赖项变更导致副作用被触发时
			        e.target包含了值
			        debugger
			    }
			  }
			)

(2)watchPostEffect 
	和flush:'post'	效果一致，作为别名使用
(3)watchSyncEffect 
	和flush:'sync'	效果一致，作为别名使用

(4)卸载watchEffect时机
	异步回调创建一个侦听器，那么它不会绑定到当前组件上，必须手动停止它，以防内存泄漏，同步则不用
	
	需要手动卸载：
	setTimeout(() => {
	  watchEffect(() => {})
	}, 100)

代码示例:

<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>