当前位置：首页 > news >正文

Vue.js前端框架教程11：Vue监听器watch和watchEffect

news 来源：原创 2025/6/8 11:13:34

文章目录

- - - 监听器（watchers）
    - - 基本用法
      - deep: true
      - immediate: true
      - 总结
    - watchEffect
    - - 基本用法
      - 自动追踪依赖
      - 停止监听
      - 与 `watch` 的对比
      - 性能优化
      - 总结

监听器（watchers）

在 Vue 中，监听器（watchers）是一种观察和响应 Vue 实例上的数据变动的机制。Vue 提供了 watch 属性，允许我们执行副作用的函数，并且可以精确控制它们应该在何时运行。watch 可以监听 Vue 实例上的数据，或者任何 getter 函数。

基本用法

watch 的基本用法如下：

export default {data() {return {watchedProperty: ''};},watch: {// 监听 data 中的属性watchedProperty(newValue, oldValue) {// 在这里执行操作，当 watchedProperty 发生变化时}}
};

或者使用 Vue 3 的 Composition API：

import { watch, ref } from 'vue';export default {setup() {const watchedProperty = ref('');watch(watchedProperty, (newValue, oldValue) => {// 在这里执行操作，当 watchedProperty 发生变化时});return {watchedProperty};}
};

deep: true

deep: true 是 watch 选项的一个参数，用于指定是否进行深度监听。深度监听意味着 Vue 会监听对象内部属性的变化，而不仅仅是对象本身的引用变化。

export default {data() {return {someObject: {nestedProperty: ''}};},watch: {// 深度监听 someObject 对象someObject: {handler(newValue, oldValue) {// 当 someObject 或其内部属性发生变化时，这个函数会被调用},deep: true}}
};

immediate: true

immediate: true 也是 watch 选项的一个参数，用于指定是否在监听器被创建之后立即以当前的值触发回调函数。

export default {data() {return {immediateProperty: ''};},watch: {// 立即执行，并且监听 immediateProperty 的变化immediateProperty: {handler(newValue, oldValue) {// 当 immediateProperty 发生变化时，这个函数会被调用},immediate: true}}
};

在上面的例子中，当组件实例化后，immediateProperty 的监听器会立即执行一次，即使 immediateProperty 还没有发生变化。

总结

基本监听：用于监听数据的变化，并在变化时执行回调函数。
deep: true：用于深度监听一个对象，以便能够检测到对象内部属性的变化。
immediate: true：用于在监听器被创建时立即执行回调函数，无论监听的值是否已经变化。

这些监听选项使得 Vue 的响应式系统更加灵活和强大，允许开发者根据具体需求来精确控制数据变化时的行为。

watchEffect

在 Vue 3 中，watchEffect 是一个强大的响应式 API，它用于自动追踪其内部依赖的响应式数据变化，并在数据变化时执行相应的副作用。以下是 watchEffect 的一些关键特性和用法：

基本用法

watchEffect 接受一个函数作为参数，这个函数会在 watchEffect 被创建时立即执行一次，之后每当其依赖的响应式状态发生变化时，都会重新执行。

import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => {console.log(`count is now: ${count.value}`);
});

在这个例子中，每当 count 的值发生变化时，控制台都会打印出新的 count 值。

自动追踪依赖

与 watch 不同，watchEffect 不需要明确指定要监听的目标，而是会根据回调函数中访问的响应式数据自动追踪依赖。

停止监听

watchEffect 返回一个停止函数，调用这个函数可以手动停止监听，这有助于避免内存泄漏。

const stop = watchEffect(() => {// ...
});// 停止监听
stop();

与 `watch` 的对比

依赖声明：watch 需要显式指定要监听的响应式数据，而 watchEffect 自动追踪内部访问的响应式数据。
回调参数：watch 提供新值 (newVal) 和旧值 (oldVal)，而 watchEffect 无法直接访问变化前后的值。
立即执行：watch 默认不立即执行（可通过 immediate 选项控制），而 watchEffect 默认立即执行。
适用场景：watch 适合特定数据变化时执行操作，watchEffect 适合简单逻辑的响应式副作用处理。

性能优化

watchEffect 由于其自动追踪依赖的特性，可以减少冗余的代码，使得副作用的处理更加简洁。但在某些情况下，如果回调函数中的操作非常昂贵，可能会影响性能，因此需要合理使用。

总结

watchEffect 是 Vue 3 中用于响应式监听的一个新的工具，它提供了一种更简洁、更自动化的方式来处理响应式数据变化的副作用。通过自动追踪依赖和立即执行的机制，watchEffect 使得开发者可以更专注于业务逻辑的实现，而不需要关心依赖的声明和变化检测的细节。

文章目录

监听器（watchers）

基本用法

deep: true

immediate: true

总结

watchEffect

基本用法

自动追踪依赖

停止监听

与 watch 的对比

性能优化

总结

相关文章：

与 `watch` 的对比