https://fe-interview.pangcy.cn/tags/vue-api/Recent content in Vue API on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-02/Tue, 04 Mar 2025 07:00:27 +0000https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-02/<h2 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></h2><p>本题主要考察以下核心维度：</p> <ol> <li><strong>响应式原理理解</strong>：Vue数据绑定的底层实现机制</li> <li><strong>框架特性掌握</strong>：对Vue响应式系统局限性的认知</li> <li><strong>问题解决能力</strong>：动态属性更新的场景处理方案</li> </ol> <p>具体技术评估点：</p> <ul> <li><code>Object.defineProperty</code>的监听局限性</li> <li><code>Vue.set</code>/<code>$set</code>的实现机制</li> <li>对象引用替换的更新原理</li> <li>Vue 2.x 与 3.x 响应式方案差异</li> </ul> <h2 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></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>响应式系统 &gt; <code>Object.defineProperty</code> 限制 &gt; <code>Vue.set</code>原理 &gt; 对象引用替换</p> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>Vue 2.x 使用 <code>Object.defineProperty</code> 实现响应式，其局限性在于：</p> <ol> <li>初始化时递归转换属性 <code>getter</code>/<code>setter</code></li> <li>无法检测属性新增/删除（对象属性变更检测阈值为±1ms）</li> <li>数组变异方法<code>hack</code>处理</li> </ol> <p>动态添加属性未触发更新的根本原因是新属性缺少 <code>getter</code>/<code>setter</code> 拦截器，导致依赖追踪失效。<code>Vue.set</code>通过以下方式解决：</p> <ol> <li>向响应式对象添加新属性</li> <li>触发依赖通知（Dep.notify）</li> <li>子属性递归响应化</li> </ol> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li>认为数组方法<code>push</code>/<code>pop</code>等可以直接触发更新（需使用变异方法）</li> <li>混淆<code>Vue.set</code>和直接赋值的区别</li> <li>误用<code>delete</code>删除属性导致失去响应性</li> </ol> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p><strong>原因</strong>：Vue 2.x 基于 <code>Object.defineProperty</code>的响应式系统在初始化时创建<code>getter</code>/<code>setter</code>，动态添加的属性缺乏拦截机制导致变更无法触发视图更新。</p> <p><strong>解决方案</strong>：</p> <ol> <li> <p><strong>Vue.set / $set</strong></p> <div class="prism-codeblock "> <pre id="9739d55" class="language-javascript "> <code>Vue.set(vm.obj, &#39;newProp&#39;, value) // 或 this.$set(this.obj, &#39;newProp&#39;, value)</code> </pre> </div> <p><strong>原理：</strong> 向响应式对象添加属性并触发依赖更新</p>