面试题：如何在复杂 Vue 应用场景下，同时兼顾 Vuex 性能优化与内存管理并进行调优

1. Vuex 模块拆分

按功能模块拆分：将庞大的业务逻辑按功能划分为多个 Vuex 模块，每个模块管理自己的状态、mutations、actions 等。例如，电商应用可拆分为用户模块、商品模块、购物车模块等。这样便于代码维护和理解，也能减少模块间不必要的依赖和状态更新开销。

// user.js
const state = {
  userInfo: null
};
const mutations = {
  SET_USER_INFO(state, info) {
    state.userInfo = info;
  }
};
const actions = {
  async fetchUserInfo({ commit }) {
    const response = await axios.get('/user/info');
    commit('SET_USER_INFO', response.data);
  }
};
export default {
  namespaced: true,
  state,
  mutations,
  actions
};

2. 状态缓存

合理使用缓存数据：对于不经常变化且获取成本较高的数据，在 Vuex 中进行缓存。可以通过设置标志位判断数据是否已缓存，避免重复获取。

const state = {
  cachedData: null,
  isCached: false
};
const actions = {
  async fetchData({ state, commit }) {
    if (state.isCached) {
      return state.cachedData;
    }
    const response = await axios.get('/data');
    commit('SET_CACHED_DATA', response.data);
    return response.data;
  }
};
const mutations = {
  SET_CACHED_DATA(state, data) {
    state.cachedData = data;
    state.isCached = true;
  }
};

3. 数据持久化

使用 localStorage 或 sessionStorage：将重要且相对静态的 Vuex 状态持久化到本地存储，页面刷新或重新加载时可快速恢复状态。例如用户的登录状态、设置等。

// 在 main.js 中
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    userLoggedIn: false
  },
  mutations: {
    SET_USER_LOGGED_IN(state, status) {
      state.userLoggedIn = status;
      localStorage.setItem('userLoggedIn', status);
    }
  },
  actions: {
    initStore({ commit }) {
      const loggedIn = localStorage.getItem('userLoggedIn');
      if (loggedIn) {
        commit('SET_USER_LOGGED_IN', JSON.parse(loggedIn));
      }
    }
  }
});
store.dispatch('initStore');
export default store;

4. 组件生命周期与 Vuex 交互的优化

在 created 中获取数据：避免在 mounted 中获取大量数据，因为 mounted 执行时 DOM 已渲染，此时获取大量数据可能导致页面卡顿。在 created 钩子中发起 Vuex actions 获取数据。

export default {
  created() {
    this.$store.dispatch('fetchData');
  }
};

组件销毁时清理：如果组件在 Vuex 中有订阅或注册的副作用，在组件销毁时（beforeDestroy 钩子）进行清理，防止内存泄漏。例如取消 Vuex action 中的定时器、事件监听等。

export default {
  data() {
    return {
      timer: null
    };
  },
  created() {
    this.timer = setInterval(() => {
      this.$store.commit('UPDATE_SOME_STATE');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};

5. 优化 mutations

减少不必要的状态更新：确保 mutations 只在状态真正变化时执行。可以通过对比新旧状态，只有不同时才更新。

const mutations = {
  UPDATE_STATE(state, newData) {
    if (JSON.stringify(state.someData)!== JSON.stringify(newData)) {
      state.someData = newData;
    }
  }
};

6. 批量操作

在 actions 中进行批量提交：避免多次触发 mutations 导致不必要的性能开销。例如需要更新多个状态时，在一个 action 中通过一次 commit 提交多个变化。

const actions = {
  updateMultipleStates({ commit }, payload) {
    commit('UPDATE_STATE_1', payload.data1);
    commit('UPDATE_STATE_2', payload.data2);
  }
};

7. 使用 Vuex 插件进行性能监测

安装并使用 vuex - debug - tools：它可以帮助我们监测 Vuex 状态变化、mutation 和 action 的执行情况，便于发现性能瓶颈和异常状态更新。

import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex - debug - tools';
Vue.use(Vuex);
const store = new Vuex.Store({
  //...
  plugins: [createLogger()]
});

星途面试题库

面试题：如何在复杂 Vue 应用场景下，同时兼顾 Vuex 性能优化与内存管理并进行调优

知识考点

面试题答案

1. Vuex 模块拆分

2. 状态缓存

3. 数据持久化

4. 组件生命周期与 Vuex 交互的优化

5. 优化 mutations

6. 批量操作

7. 使用 Vuex 插件进行性能监测