⚡ 30 秒速记

• 父传属性，子发事件，单向数据来源清楚
• 插槽复用结构，暴露必要变化入口
• 深层共享可用注入，跨区域状态再评估存储
• 引用用于有限命令，不成为任意修改后门
• 订阅与事件总线都要管理生命周期

组件化实践的重点，是让组件之间怎样交换信息一眼能看明白。 父级提供输入，子级发事件表达操作，插槽把可变内容交给使用方；深层共享和全局状态再选择相应机制。引用适合聚焦等少量命令，不应让父级随意改子级内部数据。通信方式越隐含，排查越难，所以优先选择最局部、最明确的连接，并给外部订阅安排清理。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

vue组件化实践

组件化

vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界 面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护 性，便于多人协同开发。

组件通信常用方式

1. props

父给子传值

 
// child
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>

2. 自定义事件

子给父传值

  
// child this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>

3. 事件总线

任意两个组件之间传值常用事件总线 或 vuex的方式。

  // Bus:事件派发、监听和回调管理 class Bus {
constructor(){ this.callbacks = {}
  }
  $on(name, fn){
this.callbacks[name] = this.callbacks[name] || []
this.callbacks[name].push(fn) }
$emit(name, args){ if(this.callbacks[name]){
this.callbacks[name].forEach(cb => cb(args)) }
} }
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle) // child2 this.$bus.$emit('foo')

实践中通常用Vue代替Bus，因为Vue已经实现了相应接口

4. vuex

创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。