MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue侦听器 如何优雅地处理副作用操作

2021-08-107.0k 阅读

1. Vue 侦听器基础回顾

在 Vue 中，侦听器（watchers）是一种非常强大的工具，它允许我们对数据的变化做出响应。当我们需要在数据变化时执行一些操作，比如异步请求、数据缓存更新、DOM 操作等副作用操作时，侦听器就派上了用场。

Vue 的侦听器可以通过 watch 选项在组件中定义。例如，我们有一个简单的计数器组件：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  }
};
</script>

在上述代码中，我们定义了一个 count 的侦听器。当 count 的值发生变化时，watch 函数就会被调用，传入新值 newValue 和旧值 oldValue。这是最基本的侦听器使用方式，能让我们在数据变化时做出简单的响应。

2. 副作用操作的定义与场景

副作用操作是指那些在函数执行过程中，除了返回预期结果之外，还会对外部环境产生影响的操作。在前端开发中，常见的副作用操作包括：

  • 网络请求：例如在用户输入搜索关键词后，向服务器发送请求获取搜索结果。
  • DOM 操作：当数据变化时，可能需要直接操作 DOM 元素，虽然 Vue 提倡数据驱动视图，但某些复杂场景下可能无法避免直接操作 DOM。
  • 存储操作：比如将用户设置的数据存储到本地缓存（localStorage 或 sessionStorage）中。

以一个搜索框组件为例，当用户输入关键词时，我们需要向服务器发送请求获取搜索结果，这就是一个典型的副作用操作场景。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    };
  },
  watch: {
    searchQuery(newValue) {
      if (newValue.length >= 3) {
        // 模拟网络请求
        setTimeout(() => {
          this.searchResults = [
            { id: 1, title: 'Result 1' },
            { id: 2, title: 'Result 2' }
          ];
        }, 1000);
      } else {
        this.searchResults = [];
      }
    }
  }
};
</script>

在这个例子中，当 searchQuery 变化且长度大于等于 3 时，我们通过 setTimeout 模拟网络请求，并更新 searchResults，这就是在侦听器中处理副作用操作。

3. 优雅处理副作用操作的原则

3.1 防抖与节流

在处理频繁触发的副作用操作时，防抖（Debounce）和节流（Throttle）是非常重要的技术。

防抖：防抖是指在事件触发后的一定时间内，如果再次触发事件，则重新计时，直到计时结束后才执行回调函数。例如在搜索框场景中，如果用户连续输入字符，我们不希望每次输入都立即发送请求，而是等待用户停止输入一段时间后再发送请求。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      timer: null
    };
  },
  watch: {
    searchQuery(newValue) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (newValue.length >= 3) {
        this.timer = setTimeout(() => {
          // 模拟网络请求
          setTimeout(() => {
            this.searchResults = [
              { id: 1, title: 'Result 1' },
              { id: 2, title: 'Result 2' }
            ];
          }, 1000);
        }, 500);
      } else {
        this.searchResults = [];
      }
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
};
</script>

在上述代码中，我们使用 timer 来控制防抖逻辑。每次 searchQuery 变化时，先清除之前的定时器，如果输入长度满足条件则重新设置定时器，确保只有在用户停止输入 500 毫秒后才执行请求。

节流：节流是指在一定时间内，无论事件触发多少次，回调函数都只会执行一次。比如在滚动事件中，我们可能希望每隔一定时间才执行一次某些副作用操作，而不是每次滚动都执行。

<template>
  <div @scroll="handleScroll">
    <p>Scroll the window</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canScroll: true
    };
  },
  methods: {
    handleScroll() {
      if (this.canScroll) {
        console.log('Scrolling...');
        this.canScroll = false;
        setTimeout(() => {
          this.canScroll = true;
        }, 300);
      }
    }
  }
};
</script>

在这个滚动事件处理的例子中，canScroll 用于控制节流逻辑，确保每 300 毫秒内 handleScroll 中的副作用操作（这里是打印日志）只执行一次。

3.2 异步操作的处理

在处理像网络请求这样的异步副作用操作时，我们需要注意一些问题。例如，如何处理请求的并发问题，如何在请求完成后正确更新数据。

假设我们有一个图片懒加载的功能，当图片进入视口时，触发网络请求加载图片。

<template>
  <div>
    <img v-for="(image, index) in images" :key="index" :data-src="image.src" lazy-load>
  </div>
</template>

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

export default {
  setup() {
    const images = ref([
      { src: 'image1.jpg' },
      { src: 'image2.jpg' }
    ]);

    const loadImage = (src) => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = src;
        img.onload = resolve;
        img.onerror = reject;
      });
    };

    onMounted(() => {
      const lazyImages = document.querySelectorAll('[lazy-load]');
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            const src = img.dataset.src;
            loadImage(src)
             .then(() => {
                img.src = src;
              })
             .catch(error => {
                console.error('Error loading image:', error);
              })
             .finally(() => {
                observer.unobserve(img);
              });
          }
        });
      });

      lazyImages.forEach(image => {
        observer.observe(image);
      });
    });

    return {
      images
    };
  }
};
</script>

在这个例子中，我们使用 IntersectionObserver 来检测图片是否进入视口，当图片进入视口时，通过 loadImage 函数发起异步加载图片的操作。在 loadImage 函数返回的 Promise 中，我们正确处理了图片加载成功、失败以及最终取消观察的逻辑。

3.3 避免不必要的重复操作

在侦听器中，我们要尽量避免不必要的重复操作。比如在数据变化时，我们可能需要更新多个相关的状态，但如果这些状态之间存在依赖关系，我们应该确保只进行必要的更新。

假设我们有一个购物车组件，当商品数量变化时，我们需要更新总价和商品总重量。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        <input type="number" v-model="item.quantity">
        <span>Price: {{ item.price }}</span>
        <span>Weight: {{ item.weight }}</span>
      </li>
      <p>Total Price: {{ totalPrice }}</p>
      <p>Total Weight: {{ totalWeight }}</p>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { id: 1, quantity: 1, price: 10, weight: 2 },
        { id: 2, quantity: 2, price: 15, weight: 3 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((acc, item) => acc + item.quantity * item.price, 0);
    },
    totalWeight() {
      return this.cartItems.reduce((acc, item) => acc + item.quantity * item.weight, 0);
    }
  },
  watch: {
    cartItems: {
      deep: true,
      handler(newValue) {
        // 这里可以添加更复杂的逻辑，比如数据验证等
        // 但由于使用了 computed，这里不需要额外更新总价和总重量
      }
    }
  }
};
</script>

在这个例子中，我们使用 computed 属性来计算总价和总重量，这样当 cartItems 变化时，computed 属性会自动根据依赖关系进行更新，避免了在侦听器中重复计算的操作。

4. 使用计算属性替代部分侦听器

在很多情况下，计算属性（computed properties）可以替代侦听器来处理数据变化。计算属性具有缓存机制，只有当它的依赖数据发生变化时才会重新计算。

比如我们有一个展示用户信息的组件，用户信息包括姓名和姓氏，我们需要展示完整的姓名。

<template>
  <div>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

在这个例子中，如果使用侦听器来实现同样的功能，代码会变得更加复杂，而且无法利用计算属性的缓存机制。只有当 firstName 或 lastName 变化时，fullName 才会重新计算，这在性能上是一个很大的优势。

然而，计算属性也有其局限性。当我们需要执行副作用操作，比如网络请求、DOM 操作等，计算属性就无法满足需求，此时还是需要使用侦听器。

5. 深度侦听器与 immediate 选项

5.1 深度侦听器

在 Vue 中，对象和数组是引用类型。当对象或数组内部的属性发生变化时，默认情况下，普通的侦听器不会被触发。例如：

<template>
  <div>
    <input v-model="user.name" placeholder="Name">
    <input v-model="user.age" type="number" placeholder="Age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: 0
      }
    };
  },
  watch: {
    user(newValue, oldValue) {
      console.log('User changed');
    }
  }
};
</script>

在上述代码中，当 user.name 或 user.age 变化时，watch 函数并不会被触发。为了监听对象内部属性的变化，我们需要使用深度侦听器。

<template>
  <div>
    <input v-model="user.name" placeholder="Name">
    <input v-model="user.age" type="number" placeholder="Age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: 0
      }
    };
  },
  watch: {
    user: {
      deep: true,
      handler(newValue, oldValue) {
        console.log('User changed');
      }
    }
  }
};
</script>

通过设置 deep: true，我们可以实现对 user 对象内部属性变化的监听。但需要注意的是，深度侦听器性能开销较大，因为 Vue 需要递归遍历对象的所有属性来检测变化，所以在使用时要谨慎。

5.2 immediate 选项

immediate 选项用于指定在组件加载时立即执行侦听器的回调函数。例如，我们有一个需要根据用户当前位置获取附近店铺的功能。

<template>
  <div>
    <p>Fetching nearby stores...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: null
    };
  },
  watch: {
    position: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          // 模拟根据位置获取附近店铺的请求
          setTimeout(() => {
            console.log('Nearby stores fetched');
          }, 1000);
        }
      }
    }
  },
  mounted() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.position = position;
      });
    }
  }
};
</script>

在这个例子中，我们设置 immediate: true，这样当组件挂载后获取到用户位置，watch 函数会立即执行，发起获取附近店铺的请求。

6. 侦听器在组件通信中的应用

在 Vue 组件通信中，侦听器也扮演着重要的角色。例如，父子组件通信时，父组件传递给子组件的数据变化时，子组件可以通过侦听器做出响应。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Initial message'
    };
  },
  methods: {
    updateMessage() {
      this.parentMessage = 'Updated message';
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
  watch: {
    message(newValue) {
      console.log('Message from parent changed:', newValue);
    }
  }
};
</script>

在上述代码中，父组件通过 props 向子组件传递 message，子组件通过侦听器监听 message 的变化，当父组件更新 message 时，子组件能够做出相应的响应。

另外，在兄弟组件通信或跨层级组件通信中，我们可以通过 Vuex 或事件总线（Event Bus）结合侦听器来实现数据变化的响应。例如，使用事件总线时，一个组件触发事件，另一个组件通过侦听器监听该事件并执行副作用操作。

<!-- ComponentA.vue -->
<template>
  <div>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

<script>
import eventBus from './eventBus.js';

export default {
  methods: {
    sendEvent() {
      eventBus.$emit('custom-event', 'Hello from ComponentA');
    }
  }
};
</script>

<!-- ComponentB.vue -->
<template>
  <div>
    <p>Listening for event...</p>
  </div>
</template>

<script>
import eventBus from './eventBus.js';

export default {
  created() {
    eventBus.$on('custom-event', (message) => {
      console.log('Received message:', message);
      // 执行副作用操作，比如更新数据等
    });
  }
};
</script>

// eventBus.js
import Vue from 'vue';
export default new Vue();

在这个例子中，ComponentA 通过事件总线 eventBus 触发 custom - event 事件，并传递数据，ComponentB 在 created 钩子函数中通过监听该事件来执行副作用操作。

7. 结合 Vue 的生命周期钩子

在处理副作用操作时，结合 Vue 的生命周期钩子函数可以让我们的代码更加健壮和优雅。例如，在 beforeDestroy 钩子函数中，我们可以清理在侦听器中创建的定时器、取消网络请求等。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      timer: null
    };
  },
  watch: {
    searchQuery(newValue) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (newValue.length >= 3) {
        this.timer = setTimeout(() => {
          // 模拟网络请求
          setTimeout(() => {
            this.searchResults = [
              { id: 1, title: 'Result 1' },
              { id: 2, title: 'Result 2' }
            ];
          }, 1000);
        }, 500);
      } else {
        this.searchResults = [];
      }
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
};
</script>

在上述代码中，我们在 beforeDestroy 钩子函数中清理了 watch 中创建的定时器，避免了内存泄漏。

另外，在 mounted 钩子函数中，我们可以初始化一些需要在组件挂载后立即执行的副作用操作，比如绑定事件监听器、发起初始网络请求等。

<template>
  <div>
    <p>Component is mounted</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 模拟初始网络请求
    setTimeout(() => {
      console.log('Initial data fetched');
    }, 1000);
  }
};
</script>

通过合理结合生命周期钩子函数和侦听器，我们可以更好地管理组件的副作用操作，提高代码的可维护性和性能。

8. 最佳实践总结

  • 防抖节流优先：对于频繁触发的事件，如输入框输入、滚动等，优先使用防抖或节流技术，减少不必要的副作用操作执行次数。
  • 合理使用计算属性：能使用计算属性实现的功能，尽量避免使用侦听器，利用计算属性的缓存机制提高性能。但计算属性无法处理副作用操作，要根据实际需求选择。
  • 注意深度侦听器性能：深度侦听器虽然强大，但性能开销大，只有在确实需要监听对象或数组内部属性变化时才使用，并且要注意优化。
  • 清理副作用操作：在组件销毁时，通过 beforeDestroy 钩子函数清理在侦听器中创建的定时器、取消网络请求等，防止内存泄漏。
  • 结合生命周期钩子：利用 mounted、beforeDestroy 等生命周期钩子函数，在合适的时机执行和清理副作用操作，使代码逻辑更加清晰。

通过遵循这些最佳实践，我们可以在 Vue 开发中更加优雅地处理副作用操作，提升应用的性能和用户体验。同时，不断实践和总结经验，能让我们在面对复杂的前端开发场景时，更好地运用侦听器这一强大工具。在实际项目中，要根据具体的业务需求和场景，灵活选择和组合上述方法，以实现高效、健壮的前端应用开发。

总之，Vue 侦听器为我们处理副作用操作提供了丰富的手段，深入理解并合理运用这些技巧，将有助于我们开发出更加优秀的前端应用程序。无论是简单的表单验证，还是复杂的实时数据更新和交互，正确使用侦听器都能让我们的代码逻辑更加清晰，性能更加优化。希望通过本文的介绍，读者能对 Vue 侦听器处理副作用操作有更深入的理解和掌握，在实际开发中能够得心应手地运用这一技术。