面试题：如何在复杂业务场景下利用Vue侦听器实现高效的副作用处理与性能优化

1. Vue侦听器设计原则

精准监听：对于复杂应用中多个相互关联状态，确保只监听真正影响业务逻辑的状态变化。例如，如果有一个电商应用，商品列表的价格筛选和分类筛选都可能影响展示的商品数据，但两者相互独立。此时应分别精准监听价格筛选状态和分类筛选状态的变化，而不是监听一个包含所有筛选条件的复杂对象，避免不必要的触发。
合理设置 immediate 和 deep：
- immediate：当需要在组件创建时立即执行一次侦听器回调时，设置 immediate: true。比如在一个用户信息展示组件中，当组件挂载时就需要根据当前用户的登录状态去获取并展示用户详细信息，此时可以使用 immediate 立即触发获取用户信息的操作。
- deep：对于对象或数组类型的状态，若希望深度监听其内部值的变化，设置 deep: true。但要注意，深度监听会消耗更多性能，所以只有在必要时使用。例如，一个包含多层嵌套的商品详情对象，当其中任何一个属性变化都需要更新页面展示时，使用 deep 进行深度监听。

2. 性能优化

防抖与节流：
- 防抖：如果某个状态变化会频繁触发副作用操作（如搜索框输入实时触发搜索请求），可以使用防抖技术。通过设置一个延迟时间，在延迟时间内如果状态再次变化，则取消之前的操作并重新计时，只有在延迟时间结束后状态没有再次变化时，才执行副作用操作。这样可以避免短时间内多次触发不必要的请求。
- 节流：当状态变化频繁且需要执行一些频繁的操作（如滚动条滚动事件监听），使用节流技术。它会限制在一定时间间隔内只能触发一次副作用操作，从而减少频繁计算和渲染。
避免不必要的计算和渲染：在侦听器回调中，确保只执行与状态变化相关的必要操作。例如，若状态变化只影响页面的某一部分，避免重新渲染整个页面。可以使用 Vue 的 computed 属性结合 watch 来实现，computed 用于缓存依赖状态变化的计算结果，watch 用于在相关状态变化时更新 computed 依赖的数据，从而控制渲染范围。

3. 代码架构与关键代码片段

假设我们有一个简单的电商应用场景，有商品列表、价格筛选和库存筛选功能。

<template>
  <div>
    <input type="number" v-model="priceFilter" placeholder="价格筛选">
    <input type="number" v-model="stockFilter" placeholder="库存筛选">
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - 价格: {{ product.price }} - 库存: {{ product.stock }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100, stock: 5 },
        { id: 2, name: '商品2', price: 200, stock: 3 },
        { id: 3, name: '商品3', price: 150, stock: 7 }
      ],
      priceFilter: 0,
      stockFilter: 0
    };
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        return (product.price >= this.priceFilter && product.stock >= this.stockFilter);
      });
    }
  },
  watch: {
    priceFilter: {
      immediate: true,
      handler(newValue) {
        // 这里可以执行一些额外的操作，比如记录筛选历史
        console.log('价格筛选变化:', newValue);
      }
    },
    stockFilter: {
      immediate: true,
      handler(newValue) {
        // 这里可以执行一些额外的操作，比如记录筛选历史
        console.log('库存筛选变化:', newValue);
      }
    }
  }
};
</script>

在上述代码中，watch 分别监听 priceFilter 和 stockFilter 的变化，并设置 immediate: true 在组件创建时就执行一次回调。computed 属性 filteredProducts 根据筛选条件动态计算展示的商品列表，从而实现了精准的状态监听以及避免不必要的渲染。如果价格和库存筛选操作是频繁触发的，例如搜索框实时输入筛选值，可以结合防抖或节流技术进一步优化性能。例如使用防抖：

<template>
  <div>
    <input type="number" v-model="priceFilter" placeholder="价格筛选">
    <input type="number" v-model="stockFilter" placeholder="库存筛选">
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - 价格: {{ product.price }} - 库存: {{ product.stock }}
      </li>
    </ul>
  </div>
</template>

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100, stock: 5 },
        { id: 2, name: '商品2', price: 200, stock: 3 },
        { id: 3, name: '商品3', price: 150, stock: 7 }
      ],
      priceFilter: 0,
      stockFilter: 0
    };
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        return (product.price >= this.priceFilter && product.stock >= this.stockFilter);
      });
    }
  },
  watch: {
    priceFilter: {
      immediate: true,
      handler: debounce(function(newValue) {
        // 这里可以执行一些额外的操作，比如记录筛选历史
        console.log('价格筛选变化:', newValue);
      }, 300)
    },
    stockFilter: {
      immediate: true,
      handler: debounce(function(newValue) {
        // 这里可以执行一些额外的操作，比如记录筛选历史
        console.log('库存筛选变化:', newValue);
      }, 300)
    }
  }
};
</script>

这里引入 lodash 的 debounce 函数，设置延迟时间为 300 毫秒，只有在 300 毫秒内输入值不再变化时，才会触发 handler 回调，有效减少了频繁操作对性能的影响。

星途面试题库

面试题：如何在复杂业务场景下利用Vue侦听器实现高效的副作用处理与性能优化

知识考点

面试题答案

1. Vue侦听器设计原则

2. 性能优化

3. 代码架构与关键代码片段