Vue2 核心技能实战：从零构建企业级应用的最佳实践

6次阅读

共计 1311 个字符，预计需要花费 4 分钟才能阅读完成。

在 Vue2 开发中，组件通信是新手最容易混淆的部分。根据不同的场景，我们需要选择合适的通信方式：

父子组件通信 ：使用 props 和 $emit 是最直接的方式
跨层级组件 ：Vuex 适合全局状态管理，provide/inject 适合深层嵌套组件
非父子关系组件 ：Event Bus 适合简单场景，复杂场景建议使用 Vuex

下面通过一个电商购物车案例，演示如何合理组织代码结构：

// Cart.vue
<template>
  <div>
    <CartList :items="cartItems" @remove="handleRemove" />
    <CartTotal :total="total" />
  </div>
</template>

<script>
export default {data() {
    return {cartItems: []
    }
  },
  computed: {total() {return this.cartItems.reduce((sum, item) => sum + item.price, 0)
    }
  },
  methods: {handleRemove(id) {this.cartItems = this.cartItems.filter(item => item.id !== id)
    }
  }
}
</script>

对于大型应用，建议将 Vuex 拆分为模块：

// store/modules/cart.js
export default {
  namespaced: true,
  state: {items: []
  },
  mutations: {ADD_ITEM(state, item) {state.items.push(item)
    },
    REMOVE_ITEM(state, id) {state.items = state.items.filter(item => item.id !== id)
    }
  },
  getters: {itemCount: state => state.items.length}
}

实现一个防抖指令，优化频繁触发的事件：

// directives/debounce.js
export default {inserted(el, binding) {
    let timer = null
    el.addEventListener('input', () => {if (timer) clearTimeout(timer)
      timer = setTimeout(() => {binding.value()
      }, 500)
    })
  }
}