vue3.0 watch

野性酷女 2021-07-24 20:48 419阅读 0赞

与选项式API this.$watch(以及相应的watch选项)完全等效
    
    和watchEffect区别:
    	(1)不会立即执行,当侦听的源变更时才会执行
    	(2)可以监听多个数据源
    	
    相同:
    	watch和watchEffect在停止侦听,清除副作用(相应地onInvalidate会作为回调的第三个参数传入),副作用刷新时机和侦听器调试等方面行为一致.
    
    使用
    	import { watch } from 'vue'
    	
    	setup(){
    		(1)监听单个数据源
    			方式一:
    				通过函数返回值
    				watch(()=>{
    					return x.value	一般用于监听对象中的单个属性,因为watch第一个参数类型得是对象
    				},(state,preState)=>{
    					...
    				})
    				
    			方式二:
    				通过直接放置ref
    				watch(x,(state,preState)=>{
    					...
    				})
    				
    		(1.5)具有和vue2中的watch等效的配置
    			watch(x,fn,{
    				immediate:true,	第一次就会执行回调
    				deep:true		深度监视
    				...
    			})
    				
    		(2)监听多个数据源	
    			watch([x,x1,...],([x,x1],[prex,prex1])=>{
    				...
    			})
    			
    		(3)清除副作用、监听侦听器、要同步或在组件更新之前配置
    			watch(x,(state,preState,onInvalidate)=>{
    					...
    					onInvalidate(){
    						执行时机:
    							在副作用即将重新执行时
    							如果在setup()或生命周期钩子函数中使用了watchEffect, 则在卸载组件时
    					}
    				}),{
    					flush: 'sync',    'pre'组件更新前运行
    					
    					onTrigger(e) {
    				        依赖项变更导致副作用被触发时
    				        e.taget包含了值
    				    },
    				    onTrack(e){
    				    	当一个 reactive对象属性或一个 ref 作为依赖被追踪时触发
    				    	e.taget包含了值
    				    }
    				}
    			}
    		
    		(4)手动停止侦听:
    			const xx=watch(...)
       	  		xx.stop();

代码示例:

<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,watch } from 'vue'
    
    export default { 
      setup() { 
        let count = ref(0)
        let count2=ref(2);
        let name = ref('jeff')
        const obj=reactive({ sex:'male'})
        const robj=readonly(obj); 
        let timer;
    
        let r=readonly('aa') //不具有只读的能力
    
        watch(()=>{ 
          return count.value
        },(count,prevcount,onInvalidate)=>{ 
          console.log(count);
          console.log(prevcount);
          onInvalidate(()=>{ 
            console.log('清除');
          })
          
        },{ 
          onTrigger(e) { 
            console.log(e);
          }
        })
        // watch(count,(count,prevcount)=>{ 
        // console.log(count);
        // console.log(prevcount);
        // })
    
      // 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 = () => { 
    
           count.value++;
          // 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>