v-if & v-for 理解

先上代码，通过 script 标签方式引入 vue.js（2.x版本）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-if&v-for</title>
  </head>
  <body>
    <div id="demo">
      <h4>v-if 与 v-for 的优先级问题</h4>
      <p v-if="isShow" v-for="(item,i) in children">{{ item.title }}</p>
    </div>
    <!-- <script src="vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#demo',
        data() {
          return {
            name: '彭',
            children: [{ title: '标题一' }, { title: '标题一' }],
            isShow: true
          };
        }
      });
      console.log(app.$options.render);
    </script>
  </body>
</html>

在打印出的 app.$options.render 中会发现，v-for 优先级高于 v-if

(function anonymous() {
    with (this) {
        return _c('div', {
            attrs: {
                "id": "demo"
            }
        }, [_c('h4', [_v("v-if 与 v-for 的优先级问题")]), _v(" "), _l((children), function(item, i) {
            return (isShow) ? _c('p', [_v(_s(item.title))]) : _e()
        })], 2)
    }
}
)

 那 vue3.x版本呢？

个人只是通过 npm run build 打包后，看js文件验证的：v-if 的优先级高于 v-for ！

const s = d([ // 自己定义的数组
        { title: "\u6807\u9898\u4E00" },
        { title: "\u6807\u9898\u4E8C" },
      ]);
      let v = d(!0); // 自己定义的布尔值
      return (y, m) => (
        c(),
        p(
          f,
          null,
          [
            a("h1", null, u(r.msg), 1),
            a(
              "h2",
              { onClick: m[0] || (m[0] = (...g) => i(l) && i(l)(...g)) },
              u(t.value),
              1
            ),
            a("h4", H, u(n.value), 1),
            a("h4", null, u(i(o).gander), 1),
            i(v) // 判断定义的布尔值
              ? (c(!0),
                p(
                  f,
                  { key: 0 },
                  x(s.value, (g, W) => (c(), p("p", null, u(g.title), 1))), // 进行 for 循环
                  256
                ))
              : A("", !0),
          ],
          64
        )
      );

总结：

vue2.x 版本：v-for 优先级高于 v-if

vue3.x 版本：v-if 优先级高于 v-for

总的来说，v-if 优先级高于 v-for 可以减少性能的浪费；

如果在 vue2.x 版本，v-if & v-for 必须写在同一级怎么办？

答：在外层嵌套 template，在这一层进行 v-if 判断，然后在内部进行 v-for 循环

template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

https://www.cnblogs.com/tu-0718/p/11177236.html

 

posted @ 2022-03-19 16:38  苹果π  阅读(144)  评论(0)    收藏  举报