watch和watchEffect使用

一些好用的请求网址：https://yesno.wtf/api

`https://jsonplaceholder.typicode.com/todos/${todoId.value}`

https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=

watch和watchEffect的使用区别

const todoId = ref(1)
const data = ref(null)

watch(todoId, async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
}, { immediate: true })

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

watch是如何两次使用 todoId 的，一次是作为源，另一次是在回调中。

watchEffect 回调会立即执行，不需要指定 immediate: true。在执行期间，它会自动追踪 todoId.value 作为依赖（和计算属性类似）。每当 todoId.value 变化时，回调会再次执行。有了 watchEffect()，我们不再需要明确传递 todoId 作为源值。

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

• watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

• watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

  回调的触发时机​

  当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。

  默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

  如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：

  js

  watch(source, callback, {
    flush: 'post'
  })
  
  watchEffect(callback, {
    flush: 'post'
  })

  后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：

  import { watchPostEffect } from 'vue'
  
  watchPostEffect(() => {
    /* 在 Vue 更新后执行 */
  })

  停止侦听器​

  在 setup() 或 

  要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：

  js

  const unwatch = watchEffect(() => {})
  
  // ...当该侦听器不再需要时
  unwatch()

  注意，需要异步创建侦听器的情况很少，请尽可能选择同步创建。如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：

  // 需要异步请求得到的数据
  const data = ref(null)
  
  watchEffect(() => {
    if (data.value) {
      // 数据加载后执行某些操作...
    }
  })