阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js 中 v-if 和 v-show 的区别

      问题

      Vuev-ifv-show的区别

      答案

      • v-if如果条件不成立不会渲染当前指令所在节点的dom元素
      • v-show只是切换当前dom的显示或者隐藏

      v-show 只是在 display: none 和 display: block 之间切换。⽆论初始条件是什么 都会被渲染出来,后⾯只需要切换 CSS , DOM 还是⼀直保留着的。所以总的来说 v- show 在初始渲染时有更⾼的开销,但是切换开销很⼩,更适合于频繁切换的场景。

      v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时,组件就不会被渲 染,直到条件为 true ,并且切换条件时会触发销毁/挂载组件,所以总的来说在切换时开 销更⾼,更适合不经常切换的场景。

      并且基于 v-if 的这种惰性渲染机制,可以在必要的时候才去渲染组件,减少整个⻚⾯的 初始渲染开销。

      总结: v-if 按照条件是否渲染, v-show 是 display 的 block 或 none ;

      对应源码

      const VueTemplateCompiler = require('vue-template-compiler');
      let r1 = VueTemplateCompiler.compile(`<div v-if="true"><span v-for="i in 3">hello</span></div>`);
      /**
      with(this) {
          return (true) ? _c('div', _l((3), function (i) {
              return _c('span', [_v("hello")])
          }), 0) : _e()
      }
      */
      
      const VueTemplateCompiler = require('vue-template-compiler');
      let r2 = VueTemplateCompiler.compile(`<div v-show="true"></div>`);
      /**
      with(this) {
          return _c('div', {
              directives: [{
                  name: "show",
                  rawName: "v-show",
                  value: (true),
                  expression: "true"
              }]
          })
      }
       */
      
      // v-show 操作的是样式  定义在platforms/web/runtime/directives/show.js
      bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
          vnode = locateNode(vnode)
          const transition = vnode.data && vnode.data.transition
          const originalDisplay = el.__vOriginalDisplay =
            el.style.display === 'none' ? '' : el.style.display
          if (value && transition) {
            vnode.data.show = true
            enter(vnode, () => {
              el.style.display = originalDisplay
            })
          } else {
            el.style.display = value ? originalDisplay : 'none'
          }
      }
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录