面试题：Vue计算属性依赖注入在模块化设计中的应用

设计思路

Vuex管理状态：使用Vuex来集中管理应用的状态，不同模块可以通过Vuex获取和修改共享状态，这样依赖注入更清晰和可控。模块之间的状态依赖通过Vuex的mutation和action来处理。
Vue组件模块化：在Vue组件层面，将不同功能模块的组件独立封装，通过props和事件来进行父子组件间的通信。对于兄弟组件间通信，可以借助Vuex或者一个中央事件总线。
计算属性优化：对于计算属性，合理使用缓存机制。Vue的计算属性本身就有缓存，只有当它依赖的数据发生变化时才会重新计算。在设计计算属性时，确保依赖的数据粒度合适，避免不必要的重新计算。

关键代码示例

Vuex模块定义

// store/modules/user.js
const state = {
  userInfo: null
}

const mutations = {
  SET_USER_INFO(state, info) {
    state.userInfo = info
  }
}

const actions = {
  fetchUserInfo({ commit }) {
    // 模拟异步请求获取用户信息
    setTimeout(() => {
      const userInfo = { name: 'John Doe', age: 30 }
      commit('SET_USER_INFO', userInfo)
    }, 1000)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

Vue组件使用Vuex状态和计算属性

<template>
  <div>
    <p v-if="userInfo">Name: {{ userInfo.name }}, Age: {{ userInfo.age }}</p>
    <button @click="fetchUserInfo">Fetch User Info</button>
  </div>
</template>

<script>
export default {
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    }
  },
  methods: {
    fetchUserInfo() {
      this.$store.dispatch('user/fetchUserInfo')
    }
  }
}
</script>

组件间通过事件总线通信（可选，用于兄弟组件通信）

// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue()

<!-- ComponentA.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { eventBus } from './eventBus.js'
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello from ComponentA')
    }
  }
}
</script>

<!-- ComponentB.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { eventBus } from './eventBus.js'
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    eventBus.$on('message', (msg) => {
      this.message = msg
    })
  }
}
</script>

星途面试题库

面试题：Vue计算属性依赖注入在模块化设计中的应用

知识考点

面试题答案

设计思路

关键代码示例