vue3.0 watch

和watchEffect区别:
	(1)不会立即执行,当侦听的源变更时才会执行
	(2)可以监听多个数据源
相同:
	watch和watchEffect在停止侦听,清除副作用(相应地onInvalidate会作为回调的第三个参数传入),副作用刷新时机和侦听器调试等方面行为一致.

使用
	import { watch } from 'vue'
	
	setup(){
		(1)监听单个数据源
			方式一:
				通过函数返回值
				watch(()=>{
					return x.value
				},(state,preState)=>{
					...
				})
				
			方式二:
				通过直接放置ref
				watch(x,(state,preState)=>{
					...
				})
				
		(2)监听多个数据源	
			watch([x,x1,...],([x,x1],[prex,prex1])=>{
				...
			})
			
		(3)清除副作用、监听侦听器、要同步或在组件更新之前配置
			watch(x,(state,preState,onInvalidate)=>{
					...
					onInvalidate(){
						执行时机:
							在副作用即将重新执行时
							如果在setup()或生命周期钩子函数中使用了 watchEffect, 则在卸载组件时
					}
				}),{
					flush: 'sync',    'pre'组件更新前运行
					
					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,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>