监听之 watch VS watchEffect

用大白话讲就是，watch监听指定的数据，watchEffect可以监听所有数据

JavaScript 中的 watch 函数

作用：用于监视对象的变化并在变化时调用相应的函数

watch函数有三个参数，

• 第一个参数是需要监视的对象
• 第二个参数是在监视对象发生变化时需要调用的函数
• 第三个参数是一个可选的配置对象，它在默认情况下是false

示例一

演示了如何使用 watch 函数来监视一个输入框中的内容，当输入框中的内容包含 '?' 时，发送一个 API 请求并显示结果。这个示例使用了 Vue.js 的组合式 API 。

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const question = ref('')
    const answer = ref('Questions usually contain a question mark. ;-)')

    // 监视 question
    watch(question, async (newQuestion, oldQuestion) => {
      if (newQuestion.indexOf('?') > -1) {
        answer.value = 'Thinking...'
        try {
          const res = await fetch('https://yesno.wtf/api')
          answer.value = (await res.json()).answer
        } catch (error) {
          answer.value = 'Error! Could not reach the API. ' + error
        }
      }
    })

    return {
      question,
      answer
    }
  }
}
</script>

watch 函数的第一个参数可以是不同形式的“数据源”，包括 ref 、响应式对象、getter函数 或 多个数据源组成的数组。

示例二

演示了如何监视两个不同的 ref 对象 的变化，以及它们之和的变化：

import { ref, watch } from 'vue'

const x = ref(0)
const y = ref(0)

// 监视单个 ref
watch(x, (newX) => {
  console.log(`x is \${newX}`)
})

// 监视 getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: \${sum}`)
  }
)

// 监视多个数据源
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is \${newX} and y is \${newY}`)
})

watchEffect

Vue.js中还有一个类似的函数叫做watchEffect，它会在回调函数中自动追踪所有能访问到的响应式属性，并在这些属性发生变化时立即调用回调函数。与watch函数不同，watchEffect函数不需要明确指定要监视的数据源。

以下是一个示例，演示了如何使用watchEffect函数来监视一个ref对象的变化：

import { ref, watchEffect } from 'vue'

const count = ref(0)

// 监视 count
watchEffect(() => {
  console.log(`count is \${count.value}`)
})

需要注意的是，在使用异步回调时，只有在第一个 await 正常工作前访问到的属性才会被追踪。此外，watchEffect 函数会在副作用发生期间追踪所有的响应式依赖关系，这可能会导致一些不必要的计算。因此，应该谨慎使用watchEffect函数。