深入浅出vue.js 14.7.4～14.9

14.7.4 初始化compited。 详细拆解了计算属性 computed 的底层原理，核心要点总结如下：1. 核心本质computed 本质是挂载在 Vue 实例（vm）上的特殊 getter 方法。这个 getter 并非用户直接提供的函数，而是 Vue 内部的代理函数。它结合 Watcher 实现了依赖收集和结果缓存两大核心能力。2. 关键流程与细节缓存机制计算属性的结果会被缓存，仅当依赖的响应式数据发生变化时才会重新计算。通过 Watcher 的 dirty 属性判断是否需要更新：dirty: true → 依赖已变化，需重新计算dirty: false → 依赖未变，直接返回缓存值依赖更新与渲染联动当计算属性的依赖发生变化时，其对应的 Watcher 会将 dirty 设为 true。同时组件的 Watcher 会收到通知，触发 render 函数重新渲染。渲染时读取计算属性，会因 dirty: true 触发重新计算，确保视图使用最新值。初始化逻辑初始化时，Vue 会在 vm 上为每个计算属性设置代理 getter。首次读取时触发该 getter，进而执行用户定义的计算函数并收集依赖。3. 启发与收获性能优化：缓存机制避免了重复计算，显著提升了复杂场景下的渲染效率。依赖驱动：通过 Watcher 精准追踪依赖变化，实现了数据与视图的联动更新。设计思路：代理函数 + Watcher 的组合模式，是 Vue 响应式系统的典型体现，也为我们实现缓存类功能提供了参考范式。14.7.5 初始化watch。1. 核心触发条件初始化 watch 是 Vue 初始化状态的最后一步，仅在两个条件同时满足时才会执行：用户显式配置了 watch 选项该选项不等于浏览器原生的 watch 方法（主要为了兼容 Firefox）2. 关键细节与背景Firefox 兼容处理：Firefox 的 Object.prototype 上自带一个 watch 方法。如果用户未配置 watch，在 Firefox 中 opts.watch 会指向这个原生方法。避免误触发：通过 opts.watch !== nativeWatch 的判断，可以避免把浏览器原生方法误当作用户配置的 watch 来初始化，从而保证逻辑的正确性。3. 启发与收获这段逻辑体现了 Vue 框架的兼容性考量：框架在设计时需要考虑不同浏览器的原生 API 差异，通过细节判断规避潜在问题。这种 “先校验再执行” 的模式，也提醒我们在开发工具类代码时，要做好边界情况和环境兼容性的处理。