Vue3.0 watch

和watchEffect比较

不同点

1. 不会立即执行,当侦听的源变更时才会执行
2. 可以监听多个数据源

相同点

watch 和 watchEffect 在停止侦听,清除副作用(相应地 onInvalidate 会作为回调的第三个参数传入),副作用刷新时机和侦听器调试等方面行为一致.

使用

import { watch } from 'vue'

监听单个数据源

通过函数返回值

setup(){
  watch(()=>{ return x.value },(state,preState)=>{...})
}

通过直接放置ref

setup(){
  watch(x,(state,preState)=>{...})
}

监听多个数据源

setup(){
  watch([x,x1,...],([x,x1],[prex,prex1])=>{...})
}

清除副作用、监听侦听器、要同步或在组件更新之前配置

setup(){
  watch(x,(state,preState,onInvalidate)=>{
    ...
    onInvalidate(){
    // 执行时机:
    //   在副作用即将重新执行时
    //   如果在setup()或生命周期钩子函数中使用了 watchEffect, 则在卸载组件时
    }
  }),{
    flush: 'sync', 'pre' // 组件更新前运行
    onTrigger(e) {
      // 依赖项变更导致副作用被触发时
      // e.taget包含了值
    },
    onTrack(e){
      // 当一个 reactive对象属性或一个 ref 作为依赖被追踪时触发
      // e.taget包含了值
    }
  }
}

代码示例

<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 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('清除');
  //     })

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


    const inc = () => {
       count.value++;
    }

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