https://fe-interview.pangcy.cn/tags/%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93/Recent content in 条件渲染 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-13/Tue, 04 Mar 2025 07:00:27 +0000https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-13/<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>Vue指令编译原理理解</strong>：是否掌握模板指令到真实DOM操作的转化过程</li> <li><strong>渲染性能优化意识</strong>：能否根据场景选择最合理的渲染控制方式</li> <li><strong>框架底层机制认知</strong>：是否了解虚拟DOM diff策略与CSS样式控制的实现差异</li> </ol> <p>具体技术评估点：</p> <ul> <li>指令编译后的代码结构差异</li> <li>虚拟DOM节点创建/销毁机制</li> <li>CSS display属性的渲染管线影响</li> <li>组件生命周期钩子触发差异</li> <li>高频切换场景的性能取舍</li> </ul> <hr> <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>虚拟DOM Patch策略 &gt; CSS渲染管线 &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><strong>v-if</strong>：</p> <ul> <li>编译阶段转化为条件判断语句</li> <li>通过<code>createComment</code>/<code>removeChild</code>动态操作DOM</li> <li>触发完整的组件生命周期（created/mounted等）</li> <li>核心代码结构：</li> </ul> <div class="prism-codeblock "> <pre id="c735bd0" class="language-javascript "> <code>function render() { return this.visible ? _c(&#39;div&#39;) : _e() }</code> </pre> </div> <p><strong>v-show</strong>：</p> <ul> <li>编译为样式控制指令</li> <li>始终保留DOM节点，通过<code>display: none</code>控制可见性</li> <li>仅触发<code>beforeUpdate</code>/<code>updated</code>生命周期</li> <li>核心编译结果：</li> </ul> <div class="prism-codeblock "> <pre id="ca484e6" class="language-javascript "> <code>function render() { return _c(&#39;div&#39;, { directives: [{ name: &#34;show&#34;, value: this.visible }] }) }</code> </pre> </div> <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>认为v-show完全不会触发重排（实际上修改display仍触发渲染层合并）</li> <li>误用v-show控制组件树显隐（导致子组件状态保留）</li> <li>在SSR场景错误使用v-show（服务端无法解析display状态）</li> </ol> <hr> <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>： v-if通过条件编译实现DOM节点的动态增删，v-show通过CSS display控制显隐</p>