Vue3 watch与watchEffect区别

✨ 专栏介绍

在当今Web开发领域中，构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架，正是为了满足这些需求而诞生。它采用了MVVM架构模式，并通过数据驱动和组件化的方式，使我们能够更轻松地构建出优雅而高效的Web应用程序。在本专栏中，我们将深入学习Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。无论你是初学者还是有一定经验的开发者，通过学习Vue.js，你将能够构建出令人印象深刻的用户界面，并提升自己在Web开发领域的竞争力。让我们一起开始Vue.js之旅吧！

文章目录

- [✨ 专栏介绍](#✨ 专栏介绍)
- 引言
- watch与watchEffect的介绍
- - watch
  - watchEffect
- 用法及示例
- - watch的用法及示例
  - watchEffect的用法及示例
- 总结
- [😶 写在结尾](#😶 写在结尾)

引言

在Vue3中，watch与watchEffect是两个非常重要的响应式API。它们可以用于监听数据的变化，并在数据变化时执行相应的操作。本文将详细介绍watch与watchEffect的用法及示例，并对它们进行总结。

watch与watchEffect的介绍

watch

watch是Vue3中用于监听数据变化的API。它可以监听一个特定的数据源，并在该数据源发生变化时执行相应的回调函数。watch可以监听简单的数据，也可以监听复杂的对象或数组。

watchEffect

watchEffect是Vue3中另一个用于监听数据变化的API。它类似于watch，但没有指定要监听的具体数据源。相反，它会自动追踪其依赖，并在任何依赖发生变化时执行回调函数。

watch可以通过设置immediate选项来控制是否在初始化时立即执行回调函数。这可以避免不必要的初始执行。

watchEffect在初始化时总是会立即执行一次回调函数，无法通过选项来控制。如果需要避免初始执行，可以将回调函数放在一个条件语句内部。

用法及示例

watch的用法及示例

js 复制代码

// 监听简单数据
const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`count从${oldValue}变为${newValue}`);
});

// 监听对象
const obj = reactive({ name: '张三', age: 18 });
watch(() => obj.name, (newValue, oldValue) => {
  console.log(`name从${oldValue}变为${newValue}`);
});

// 监听数组
const arr = reactive([1, 2, 3]);
watch(arr, (newValue, oldValue) => {
  console.log(`arr从${oldValue}变为${newValue}`);
});

watchEffect的用法及示例

js 复制代码

// 监听数据变化
const count = ref(0);
watchEffect(() => {
  console.log(`count的值为${count.value}`);
});

// 监听多个数据源
const obj = reactive({ name: '张三', age: 18 });
watchEffect(() => {
  console.log(`name的值为${obj.name}`);
  console.log(`age的值为${obj.age}`);
});

总结

watch用于监听特定的数据源，当数据发生变化时执行回调函数。
watchEffect会自动追踪其依赖，并在任何依赖发生变化时执行回调函数。
watch可以监听简单的数据、对象或数组，而watchEffect没有指定要监听的具体数据源。

如果需要监听特定的数据源，并且需要对数据变化做精细控制，可以使用watch。

如果只是简单地监听数据变化，并且不需要对数据变化做特定处理，可以使用更简洁的watchEffect。

通过本文对Vue3中的watch与watchEffect进行介绍和示例，相信读者对它们有了更深入的理解。

😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏