https://fe-interview.pangcy.cn/tags/%E6%95%B0%E6%8D%AE%E7%9B%91%E5%90%AC/Recent content in 数据监听 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-34/Tue, 04 Mar 2025 07:00:27 +0000https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-34/<h2 id="回答结构">回答结构 <a href="#%e5%9b%9e%e7%ad%94%e7%bb%93%e6%9e%84" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>本题重点考查候选人以下能力：</p> <ol> <li><strong>响应式系统原理理解</strong>：对Vue核心响应机制（依赖收集/派发更新）的掌握程度</li> <li><strong>特性设计对比</strong>：能否从底层机制解释watch/computed的行为差异</li> <li><strong>性能优化意识</strong>：根据场景选择合适方案的工程决策能力</li> <li><strong>异步编程理解</strong>：对微任务队列与同步执行差异的认知</li> </ol> <p>具体评估点：</p> <ul> <li>依赖追踪方式（自动收集 vs 显式声明）</li> <li>缓存策略对性能的影响</li> <li>异步操作支持性差异</li> <li>副作用处理能力</li> <li>计算属性与侦听器的适用场景边界</li> </ul> <h3 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><h4 id="关键知识点优先级">关键知识点优先级 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><ol> <li>缓存机制 &gt; 2. 依赖追踪 &gt; 3. 异步支持</li> </ol> <h4 id="核心差异解析">核心差异解析 <a href="#%e6%a0%b8%e5%bf%83%e5%b7%ae%e5%bc%82%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><ol> <li> <p><strong>依赖追踪</strong>：</p> <ul> <li>Computed：通过getter自动收集依赖，建立响应式数据→计算属性的依赖关系图</li> <li>Watch：需要显式指定监听目标，依赖关系通过watcher构造函数手动建立</li> </ul> </li> <li> <p><strong>缓存机制</strong>：</p> <div class="prism-codeblock "> <pre id="604eff9" class="language-javascript "> <code>// computed实现伪代码 class ComputedImpl { _dirty = true // 缓存有效性标识 get value() { if (this._dirty) { this._value = calculate() // 重新计算 this._dirty = false } return this._value } update() { this._dirty = true } // 依赖变更时触发 }</code> </pre> </div> <p>Watch无缓存设计，每次变更立即触发回调</p>