面试官：Vue中的v-show和v-if怎么理解？

你的名字 2022-12-26 02:19 165阅读 0赞

![format_png][]

## 一、v-show与v-if的共同点 ##

我们都知道在 `vue` 中 `v-show` 与 `v-if` 的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示

在用法上也是相同的

<Model v-show="isShow" />
    <Model v-if="isShow" />

*  当表达式为`true`的时候，都会占据页面的位置
 *  当表达式都为`false`时，都不会占据页面位置

## 二、v-show与v-if的区别 ##

*  控制手段不同
 *  编译过程不同
 *  编译条件不同
 *  性能消耗不同

控制手段：`v-show`隐藏则是为该元素添加`css--display:none`，`dom`元素依旧还在。`v-if`显示隐藏是将`dom`元素整个添加或删除

编译过程：`v-if`切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；`v-show`只是简单的基于css切换

编译条件：`v-if`是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

*  `v-show` 由`false`变为`true`的时候不会触发组件的生命周期
 *  `v-if`由`false`变为`true`的时候，触发组件的`beforeCreate`、`create`、`beforeMount`、`mounted`钩子，由`true`变为`false`的时候触发组件的`beforeDestroy`、`destroyed`方法

性能消耗：`v-if`有更高的切换消耗；`v-show`有更高的初始渲染消耗

## 三、v-show与v-if原理分析 ##

具体解析流程这里不展开讲，大致流程如下

*  将模板`template`转为`ast`结构的`JS`对象
 *  用`ast`得到的`JS`对象拼装`render`和`staticRenderFns`函数
 *  `render`和`staticRenderFns`函数被调用后生成虚拟`VNODE`节点，该节点包含创建`DOM`节点所需信息
 *  `vm.patch`函数通过虚拟`DOM`算法利用`VNODE`节点创建真实`DOM`节点

### v-show原理 ###

不管初始条件是什么，元素总是会被渲染

我们看一下在`vue`中是如何实现的

代码很好理解，有`transition`就执行`transition`，没有就直接设置`display`属性

// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.ts
    export const vShow: ObjectDirective<VShowElement> = {
      beforeMount(el, { value }, { transition }) {
        el._vod = el.style.display === 'none' ? '' : el.style.display
        if (transition && value) {
          transition.beforeEnter(el)
        } else {
          setDisplay(el, value)
        }
      },
      mounted(el, { value }, { transition }) {
        if (transition && value) {
          transition.enter(el)
        }
      },
      updated(el, { value, oldValue }, { transition }) {
        // ...
      },
      beforeUnmount(el, { value }) {
        setDisplay(el, value)
      }
    }

### v-if原理 ###

`v-if`在实现上比`v-show`要复杂的多，因为还有`else` `else-if` 等条件需要处理，这里我们也只摘抄源码中处理 `v-if` 的一小部分

返回一个`node`节点，`render`函数通过表达式的值来决定是否生成`DOM`

// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.ts
    export const transformIf = createStructuralDirectiveTransform(
      /^(if|else|else-if)$/,
      (node, dir, context) => {
        return processIf(node, dir, context, (ifNode, branch, isRoot) => {
          // ...
          return () => {
            if (isRoot) {
              ifNode.codegenNode = createCodegenNodeForBranch(
                branch,
                key,
                context
              ) as IfConditionalExpression
            } else {
              // attach this branch's codegen node to the v-if root.
              const parentCondition = getParentCondition(ifNode.codegenNode!)
              parentCondition.alternate = createCodegenNodeForBranch(
                branch,
                key + ifNode.branches.length - 1,
                context
              )
            }
          }
        })
      }
    )

## 四、v-show与v-if的使用场景 ##

`v-if` 与 `v-show` 都能控制`dom`元素在页面的显示

`v-if` 相比 `v-show` 开销更大（直接操作`dom`节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

## 参考文献 ##

*  https://www.jianshu.com/p/7af8554d8f08
 *  https://juejin.cn/post/6897948855904501768
 *  https://vue3js/docs/zh

面试官VUE系列总进度：6／33

[面试官：说说你对vue的理解?][vue]

[面试官：说说你对SPA（单页应用）的理解?][SPA]

[面试官：说说你对双向绑定的理解?][Link 1]

[面试官：说说你对Vue生命周期的理解?][Vue]

[面试官：Vue组件间通信方式都有哪些?][Vue 1]

![format_png 1][]

[format_png]: /images/20221120/39b12e6c1c88433ab5041a824dcc8d3b.png
[vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c093cb674985ef3bd2966f66fc28c5eb70b0037e4be1af4bf54fb6fa9571985abd31d52f&idx=1&mid=2247484101&scene=21&sn=83b0983f0fca7d7c556e4cb0bff8c9b8#wechat_redirect
[SPA]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c081cb6749976814aaeda6a6433db418223cec57edda7e15b9e5a0ca69ad549655639c61&idx=1&mid=2247484119&scene=21&sn=d171b28a00d42549d279498944a98519#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c151cb6748476008dab2f4e6c6264f5d19678305955c85cec1b619e56e8f7457b7357fb9&idx=1&mid=2247484167&scene=21&sn=7b00b4333ab2722f25f12586b70667ca#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c146cb67485015f24f7e9f5862c4c685fc33485fe30e1b375a534b4031978439c554e0c0&idx=1&mid=2247484176&scene=21&sn=5623421ed2678046ed9e438aadf6e26f#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c116cb674800b2757be9eb27fe20709de0e511b834d8bb6b23171218fa4a1cfd5f87596c&idx=1&mid=2247484224&scene=21&sn=3043891f60d99afcf74dffd6b9b51ff7#wechat_redirect
[format_png 1]: /images/20221120/5b66e4a177f447a79338940a95705aff.png