vue vif实现原理
Vue v-if 实现原理
Vue 的 v-if 指令通过条件渲染控制 DOM 元素的显示与隐藏。其实现原理基于虚拟 DOM 和编译阶段的代码生成。
编译阶段
模板中的 v-if 会被编译为渲染函数中的条件表达式。例如以下模板：
<div v-if="condition">Content</div>会被编译为类似以下的渲染函数代码：
function render() {
return condition ? _c('div', [_v("Content")]) : _e()
}_c 创建元素，_e 创建空节点，_v 创建文本节点。
虚拟 DOM 对比
当 condition 变化时，Vue 会重新执行渲染函数生成新的虚拟 DOM，并与旧的虚拟 DOM 对比。如果条件不满足，虚拟 DOM 中对应位置是空节点，触发真实 DOM 的移除操作。
与 v-show 的区别
v-if 是真正的条件渲染，会销毁和重建组件及其事件监听器。v-show 只是切换 CSS 的 display 属性，元素始终保留在 DOM 中。
生命周期影响
使用 v-if 切换时，组件会完整触发销毁和重新创建的生命周期钩子。频繁切换的场景下，v-show 性能更好。
源码关键点
在 Vue 源码中，v-if 的处理主要在编译器的 processIf 函数和代码生成阶段，生成三元表达式形式的渲染代码。运行时依赖虚拟 DOM 的比对机制实现条件渲染。
