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

文章目录

• • • • 监听器（watchers）
      • • 基本用法
        • [deep: true](#deep: true)
        • [immediate: true](#immediate: true)
        • 总结
      • watchEffect
      • • 基本用法
        • 自动追踪依赖
        • 停止监听
        • [与 `watch` 的对比](#与 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 使得开发者可以更专注于业务逻辑的实现，而不需要关心依赖的声明和变化检测的细节。