vue3中的watchEffect与watch有什么区别

在开发 Vue 应用程序的整个过程中，您将拥有大量的响应性数据属性。您的应用程序将跟踪 input 字段、data 计算和一系列其他属性，并且可能需要在值更新时执行操作。

Vue 中的 watch 可以观察响应性属性，并可以检测到属性何时发生变化。它本质上充当组件响应式数据的事件监听器。

特别是当与异步 API 调用配合使用时，例如：

• 当 ID 改变时，从数据库中获取一个对象
• 当 prop 更改时重新运行动画
• 监听路由变化
• input 输入框值的特殊处理等

在 Vue3 中，除了 watch 方法之外，还有一个新的 watchEffect 方法，可以在 Composition API 中使用。下面我们来简单介绍一下这两个方法。

如何使用 Vue watch？

Vue Options API 提供了一个 watch 选项，您可以在其中定义监视对象。要使用它，首先必须在 data 对象中具有要跟踪的属性。

export default {
  data () {
    return {
      title: 'Vue2'
    }
  },
  watch: {
    // Watcher
  }
}

然后，我们必须查看 watch 方法的结构。您所要做的就是声明一个与要观察的属性同名的函数。

它应该带有两个参数：

1. 被监听属性的新 value
2. 被监听属性的旧 value

例如，这是 title 属性的观察者。

watch: {
  title(newTitle, oldTitle) {
    console.log(`标题从 ${oldTitle} 更改为 ${newTitle})
  }
}

如果我们需要跟踪两个依赖项呢？在 Vue2 中，我们可以为创建两个观察者，但是 Vue3 Composition API 为该用例提供了更好的解决方案，它就是 watchEffect。

Vue watchEffect 是如何工作的？

watchEffect 是 Vue3 中跟踪响应依赖关系的方法之一。本质上，我们可以使用响应性属性编写一个方法，每当它们的任何值更新时，我们的方法就会运行。

需要注意的一点是，除了在依赖项更改时运行外，watchEffect 还将在初始化组件时立即运行，因此在挂载 DOM 之前尝试访问 DOM 时要小心。

简单示例

让我们看一个非常简单的示例。

假设我们有某种响应性的 userID 属性，并且只想在它发生变化时打印出来。

import { ref, watchEffect } from 'vue'

export default {
  setup () {
    const userID = ref(0)

    watchEffect(() => console.log('Value: ' + userID.value))
    
    setTimeout(() => {
      userID.value = 1
    }, 1000)

    return {
      userID
    }
  }
}

当我们的组件初始化时，watchEffect 将运行并记录起始值。然后，每当 userID 的值改变时，就会触发 watchEffect。

为什么与 watch 不同？

那么，既然已经有了 watch 方法，为什么这个新的 watchEffect 方法还会存在呢?

有一些关键的区别：

• watchEffect 将在方法的任何依赖项发生更改时运行，watch 跟踪一个或多个特定的响应性属性，并且仅在该属性发生更改时运行。
• 默认情况下，watch 是惰性的，因此仅当依赖项更改时才会触发。watchEffect 在创建组件后立即运行，然后跟踪依赖关系。

但是，我们可以为 watch 传递一个 immediate 属性，使其在初始化时运行。

export default {
  watch: {
    title: {
      handler: (newTitle, oldTitle) => {
        console.log("Title changed from " + oldTitle + " to " + newTitle);
      },
      immediate: true,
    },
  },
};

watch 在以下情况下很有用：

• 您需要控制哪些依赖项会触发该方法
• 您需要访问之前的值

这需要看您的项目适合哪一种。