2022-10-21 vue3 watch watchEffec

vue3中watch的用法，比2复杂很多。

function watch<T>(
  source: WatchSource<T>,
  callback: WatchCallback<T>,
  options?: WatchOptions
): StopHandle

watch函数接受三个参数，
第一个监听的数据源：可以是一个函数返回一个值、ref、reactive、或者由以上三种组成一个数组（监听多个数据源）
第二个数据源变动时执行的回调函数,执行时机默认是渲染之前
第三个类似于2的参数，immediate、deep、flush（回调执行时机）

1：监听基本数据类型和一个函数，直接使用即可。

  const a = reactive({b: 1})
  watch(
    () => a.b,
    (value, oldValue) => {
      console.log(value, oldValue)
    }
  )

2：监听多个数据源

  const a = ref('aaa')
  const b = ref('bbbb')

  watch([a, b], ([a, b], [preva, prevb]) => {
  })

注意：如果a和b在渲染之前都被改变，只执行一次，若一个在渲染前一个在渲染后，则回调执行两次

3：监听引用数据源，数据源定义分为ref和reactive
ref定义，数组中为基本数据类型，只能获取当前值，
如果数组中是引用数据类型，需要加deep才能获取当前值：

const arrayRef = ref([1, 2, 3, 4])
watch(
 arrayRef,
 (newValue, oldValue) => {
   console.log('new', newValue, 'old', oldValue)
 },
)

---

ref定义,获取老值和新值，
如果数组中是引用数据类型，需要加deep才能获取当前值和老值：

const arrayRef = ref([1, 2, 3, 4])
watch(
  () => [...arrayRef.value],
  (newValue, oldValue) => {
   console.log('new', newValue, 'old', oldValue)
  },
)

reactive 定义，只能获取新值
如果数组中是引用数据类型，不需要加deep，reactive默认添加：

const arrayRef = reactive([1, 2, 3, 4])
watch(arrayRef, (newValue, oldValue) => {
  console.log('new', newValue, 'old', oldValue)
})

reactive 定义，可以获取新值和老值，
如果数组中是引用数据类型，需要加deep才能获取当前值：

const arrayRef = reactive([1, 2, 3, 4])
watch(
  () => [...arrayRef],
  (newValue, oldValue) => {
    console.log('new', newValue, 'old', oldValue)
  }
)

总结：如果直接监听数据源，无法获取老值，如果监听get函数，可以获取老值，如果数组中是引用数据类型，ref定义需要添加deep，reactive定义直接监听不需要加，监听get函数需要加。

watchEffect：

function watchEffect(
  effect: (onCleanup: OnCleanup) => void,
  options?: WatchEffectOptions
): StopHandle

type OnCleanup = (cleanupFn: () => void) => void

interface WatchEffectOptions {
  flush?: 'pre' | 'post' | 'sync' // 默认：'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}

type StopHandle = () => void

接受两个参数，
第一个是回调函数，在代码初始化时会立即执行，并且会同时收集依赖。回调函数有一个参数（OnCleanup），主要作用是在当该回调函数在执行任务时（还未执行完，比如在函数中包含异步函数），再次触发了该回调，这个时候在执行该回调之前会执行一次OnCleanup钩子。OnCleanup的执行时机可以简单理解为当该回调执行一次后，在该回调下次执行之前执行。
第二个是options参数。
例子：

const a = reactive({ b: 1 })
watchEffect(OnCleanup => {
  console.log(a.b) // 收集依赖
  let timer = setTimeout(() => {
    console.log(2222) // 理论上应该执行两次，但是因为OnCleanup 所以 执行一次
  }, 8000)
  OnCleanup(() => {
    console.log('执行OnCleanup')
    clearTimeout(timer)
  })
})
setTimeout(() => {
  a.b = 3
}, 5000)