面试题：Vue侦听器在大型项目中监听数组与对象变化的性能优化

监听数组与对象变化可能遇到的性能问题

频繁触发：Vue通过Object.defineProperty()来监听对象属性变化，对于数组则重写了原型方法来监听变化。当对象或数组频繁变化时，会不断触发依赖更新，导致大量的计算和DOM更新，从而引起卡顿。
深度监听开销：如果对象或数组嵌套层次较深，深度监听会带来较大的性能开销，因为需要递归遍历每个属性进行监听。

优化策略

使用computed属性：
- 原理：computed属性具有缓存机制，只有当它依赖的响应式数据发生变化时才会重新计算。这可以避免不必要的重复计算，提升性能。
- 示例：

<template>
  <div>
    <input v-model="message" />
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

节流防抖技术：
- 节流（Throttle）：
  - 原理：在一定时间间隔内，无论触发多少次事件，都只执行一次回调函数。这可以限制事件触发的频率，减少不必要的计算。
  - 示例：

<template>
  <div>
    <input @input="throttledHandleInput" />
  </div>
</template>

<script>
export default {
  methods: {
    throttledHandleInput: _.throttle(function() {
      // 处理输入的逻辑
      console.log('Input processed');
    }, 300)
  }
};
</script>

防抖（Debounce）：
- 原理：在事件触发后，等待一定时间，如果这段时间内没有再次触发事件，才执行回调函数。这适用于用户输入等场景，避免用户频繁操作导致的不必要计算。
- 示例：

<template>
  <div>
    <input @input="debouncedHandleInput" />
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  methods: {
    debouncedHandleInput: _.debounce(function() {
      // 处理输入的逻辑
      console.log('Input processed');
    }, 300)
  }
};
</script>

避免不必要的深度监听：
- 原理：如果对象或数组的某些深层属性不需要实时监听，可以不进行深度监听。Vue提供了shallowReactive和shallowWatch等方法来实现浅层次的响应式监听。
- 示例：

<template>
  <div>
    <button @click="updateData">Update Data</button>
  </div>
</template>

<script>
import { shallowReactive, watch } from 'vue';
export default {
  setup() {
    const data = shallowReactive({
      outer: {
        inner: 'initial'
      }
    });

    watch(data, () => {
      console.log('Outer level change detected');
    }, { immediate: true });

    const updateData = () => {
      // 这里修改inner属性不会触发watch回调
      data.outer.inner = 'updated';
      // 但修改outer属性会触发
      data.outer = { inner: 'new' };
    };

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

星途面试题库

面试题：Vue侦听器在大型项目中监听数组与对象变化的性能优化

知识考点

面试题答案

监听数组与对象变化可能遇到的性能问题

优化策略