面试题：Vue Composition API中watch的深度监听与性能优化

深度监听复杂对象时的性能优化

减少不必要的深度监听：
- 仅在确实需要监听对象内部属性变化时才使用深度监听。如果只是关注对象整体引用的变化，可不用深度监听。例如：
```
data() {
  return {
    myObject: {
      prop1: 'value1',
      prop2: 'value2'
    }
  };
},
watch: {
  myObject: {
    immediate: true,
    handler(newVal, oldVal) {
      // 处理逻辑
    }
  }
}
```
这样只监听myObject引用变化，若对象内部属性变化不影响逻辑，这种方式性能更好。

节流（throttle）或防抖（debounce）：

节流：使用lodash的throttle方法，限制监听回调的触发频率。比如，在监听一个频繁变化的复杂对象时，每500毫秒触发一次处理逻辑。

import throttle from 'lodash/throttle';
data() {
  return {
    complexObject: { /* 复杂对象数据 */ }
  };
},
watch: {
  complexObject: {
    deep: true,
    handler: throttle(function(newVal, oldVal) {
      // 处理逻辑
    }, 500)
  }
}

防抖：使用lodash的debounce方法，在监听到变化后，延迟一定时间再触发处理逻辑，如果在延迟时间内又有变化，则重新计时。例如：

import debounce from 'lodash/debounce';
data() {
  return {
    complexObject: { /* 复杂对象数据 */ }
  };
},
watch: {
  complexObject: {
    deep: true,
    handler: debounce(function(newVal, oldVal) {
      // 处理逻辑
    }, 300)
  }
}

使用计算属性（Computed）辅助：

对于复杂对象中的部分属性计算出一个简化的值，监听这个简化值而不是整个复杂对象。例如：

data() {
  return {
    user: {
      name: 'John',
      age: 30,
      address: {
        city: 'New York',
        street: '123 Main St'
      }
    }
  };
},
computed: {
  userCity() {
    return this.user.address.city;
  }
},
watch: {
  userCity(newVal, oldVal) {
    // 处理逻辑
  }
}

多个相关联响应式数据的watch逻辑组织

分组监听：

将相关的数据分组，对每组数据分别进行监听。例如，在一个用户信息编辑页面，将基本信息（姓名、年龄）和联系方式（电话、邮箱）分组。

data() {
  return {
    basicInfo: {
      name: 'John',
      age: 30
    },
    contactInfo: {
      phone: '1234567890',
      email: 'john@example.com'
    }
  };
},
watch: {
  basicInfo: {
    deep: true,
    handler(newVal, oldVal) {
      // 处理基本信息变化逻辑
    }
  },
  contactInfo: {
    deep: true,
    handler(newVal, oldVal) {
      // 处理联系方式变化逻辑
    }
  }
}

封装成函数：

如果不同数据变化时执行的部分逻辑相同，将这部分逻辑封装成函数。例如：

data() {
  return {
    data1: '',
    data2: ''
  };
},
methods: {
  handleDataChange() {
    // 相同处理逻辑
  }
},
watch: {
  data1(newVal, oldVal) {
    this.handleDataChange();
  },
  data2(newVal, oldVal) {
    this.handleDataChange();
  }
}

使用Vuex（若适用）：

如果项目使用Vuex，将相关的响应式数据集中管理在Vuex的状态中，并在Vuex的mutation中统一处理数据变化。组件中通过mapState和mapMutations辅助函数来操作数据，这样可以使逻辑更集中，提高可维护性。例如：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    relatedData1: '',
    relatedData2: ''
  },
  mutations: {
    updateRelatedData1(state, payload) {
      state.relatedData1 = payload;
    },
    updateRelatedData2(state, payload) {
      state.relatedData2 = payload;
    }
  }
});

// Component.vue
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
   ...mapState(['relatedData1','relatedData2'])
  },
  methods: {
   ...mapMutations(['updateRelatedData1', 'updateRelatedData2'])
  }
}

星途面试题库

面试题：Vue Composition API中watch的深度监听与性能优化

知识考点

面试题答案

深度监听复杂对象时的性能优化

多个相关联响应式数据的watch逻辑组织