面试题：Vue watch性能优化之立即执行与防抖节流的结合

Question

假设在一个Vue项目中，有一个输入框，通过watch监听输入值的变化来进行搜索操作。为了提升性能，既要在组件创建时立即执行一次搜索，又要防止用户频繁输入导致性能问题（使用防抖或节流）。请描述实现思路并给出相应代码示例。

Answer 1

实现思路

1. 在Vue组件中，使用watch监听输入框的值变化。
2. 为防止频繁输入，采用防抖或节流技术。这里以防抖为例，防抖意味着在用户停止输入一定时间后才执行搜索操作。
3. 利用immediate: true选项，在组件创建时立即执行一次搜索。

代码示例

<template>
  <div>
    <input v-model="searchInput" placeholder="请输入搜索内容">
  </div>
</template>

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

export default {
  data() {
    return {
      searchInput: ''
    };
  },
  watch: {
    searchInput: {
      immediate: true,
      handler: debounce(function(newValue) {
        this.performSearch(newValue);
      }, 300)
    }
  },
  methods: {
    performSearch(query) {
      // 实际的搜索逻辑，例如调用API
      console.log('执行搜索，搜索内容：', query);
    }
  }
};
</script>

在上述代码中：

• import { debounce } from 'lodash';引入了lodash库中的防抖函数。
• watch中的searchInput设置了immediate: true确保组件创建时立即执行一次handler。
• handler使用debounce包裹，延迟300毫秒执行performSearch方法，从而避免用户频繁输入导致的性能问题。performSearch方法可以替换为实际的搜索API调用。