vue3 watchEffect 用法

用法：

 

<script setup>

import { ref,watchEffect } from 'vue'

const msg = ref('Hello World!')

watchEffect(onInvalidate=>{

   console.log("监听执行：",msg.value);

   onInvalidate(()=>{

      console.log("onInvalidate先执行");

   })

},{

    flush: 'post', // sync \ pre

   onTrack(e) {

    // 当监听的值被追踪为依赖时触发，有几个值就会执行几次

    console.log("onTrack");

  },

  onTrigger(e) {

    // 当监听的值被更改时触发，执行顺序：onTrigger>onInvalidate>onTrack

    console.log("onTrigger");

  }

})

</script>

<template>

  <h1>{{ msg }}</h1>

  <input v-model="msg" />

</template>

 

 

input 改变时打印：

onTrigger

onInvalidate先执行

 onTrack
 监听执行： Hello World!cc