Webpack从“配置到提速”，4步解决“打包慢、体积大”问题

一、数据绑定：别让模板变成"计算战场"

1. 复杂逻辑抽离到计算属性

问题：模板中写 {``{ user.age > 18 ? '成年' : '未成年' }} 等复杂表达式，会导致模板臃肿且难以维护。
解决方案 ：用 computed 封装逻辑，兼具缓存特性（依赖不变则不重复计算）。

复制代码

vue

<template> <p>{``{ userStatus }}</p> </template> <script> export default { data() { return { user: { age: 20 } } }, computed: { userStatus() { // 逻辑抽离，模板更清晰 return this.user.age > 18 ? '成年' : '未成年' } } } </script>

2. v-model 绑定类型要"专一"

问题：输入框绑定 number 类型却意外赋值字符串，导致 123 + 456 = "123456" 等逻辑错误。
解决方案 ：指定 v-model 修饰符或在数据更新时强制类型转换。

复制代码

vue

 <input v-model.number="age" type="number"> <script> export default { data() { return { age: 0 } }, // 初始化为 number 类型 watch: { age(newVal) { this.age = Number(newVal) } // 双重保险 } } </script>

---

二、父子组件通信：遵守"单向数据流"铁律

1. 子组件绝不直接修改 props

问题：子组件直接修改 props 数据（如 this.message = '新内容'），会导致数据源头混乱，难以追溯。
正确流程 ：子组件通过 $emit 触发事件，父组件接收后更新数据。

复制代码

vue

 <template> <button @click="updateParent">修改标题</button> </template> <script> export default { props: ['title'], // 只读 props methods: { updateParent() { this.$emit('update-title', '新标题') // 触发事件传递数据 } } } </script>  <template> <Child :title="parentTitle" @update-title="parentTitle = $event" /> </template> <script> export default { data() { return { parentTitle: '旧标题' } } } </script>

2. 复杂数据传递用 .sync 或 v-model 语法糖

场景：父子组件频繁双向同步数据（如弹窗开关、表单输入）。

复制代码

vue

 <Child :visible.sync="isShow" />   <script> methods: { close() { this.$emit('update:visible', false) } } </script>

---

三、跨组件通信：选对工具不"滥用"

1. 小型项目用事件总线（EventBus）

适用场景：非父子组件（如兄弟组件、祖孙组件）简单通信。

复制代码

javascript

// 1. 创建事件总线（main.js） Vue.prototype.$bus = new Vue() // 2. 发送组件 this.$bus.$emit('user-login', { name: '小明' }) // 3. 接收组件（需在 beforeDestroy 解绑） created() { this.$bus.$on('user-login', (user) => { this.currentUser = user }) }, beforeDestroy() { this.$bus.$off('user-login') // 防止内存泄漏 }

2. 中大型项目用 Vuex/Pinia

核心优势：集中管理状态，避免事件总线"事件满天飞"难以维护。

复制代码

javascript

// Vuex 示例：购物车数据共享 // store/index.js state: { cart: [] }, mutations: { addToCart(state, goods) { state.cart.push(goods) } } // 组件中调用 this.$store.commit('addToCart', { id: 1, name: '商品

3. 祖孙组件用 provide/inject

适用场景：深层嵌套组件（如爷爷→孙子）传递数据，避免 props 层层透传。

复制代码

vue

 <script> export default { provide() { return { theme: 'dark' } } } </script>  <script> export default { inject: ['theme'], // 直接使用 this.theme mounted() { console.log(this.theme) // 'dark' } } </script>