vue3.0 watchEffect

超、凢脫俗 2021-07-24 11:42 322阅读 0赞

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。
    
    用法:
    	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'组件更新前运行,'post'组件更新后运行,默认为'pre'
    			  }
    			)
    			
    		(5)调试侦听器的行为
    			watchEffect(
    			  () => {
    			    ...
    			  },
    			  {
    			    onTrigger(e) {
    			        依赖项变更导致副作用被触发时
    			        e.target包含了值
    			    },
    			    onTrack(e){
    			    	当一个 reactive对象属性或一个 ref 作为依赖被追踪时触发
    			    	e.target包含了值
    			    }
    			  }
    			)

代码示例:

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