乐趣区

关于vue.js:Vue-基础自查条件渲染和列表渲染

jiezi
  1. v-if和 v-show 的区别是什么？
  2. v-if和 v-for 为什么不能一起用？
  3. v-for中的 key 有什么作用？

1 v-if 和 v-show

1.1 作用

都用来 管制元素的显示和暗藏

1.2 管制元素显隐的形式

v-if管制虚构 DOM 树上元素的创立和销毁，Vue的响应零碎会依据虚构 DOM 树对理论 DOM 进行更新，从而间接管制理论 DOM 上元素的显隐

v-show通过给元素增加款式 display:none 来让元素暗藏

1.3 初始渲染比照

v-if是惰性的，如果初始渲染条件为false，什么都不做；只有条件为true，才会开始编译

v-show不论初始渲染条件如何，元素始终被编译并保留，之后依据条件通过 CSS 切换

1.4 切换耗费比照

如果频繁切换显示与暗藏，v-if会频繁创立、销毁元素，而 v-show 只是切换款式

故 v-if 的切换耗费更高

1.5 应用场景比照

如果元素的显示暗藏在一开始就定下来不会再变了，应用v-if

如果元素须要频繁切换显隐，应用v-show

1.6 其余

  • v-if能够搭配 template 应用，v-show不能够
  • v-if能够搭配 v-else，v-show 无非凡语法

2 v-if 和 v-for

2.1 v-if 和 v-for 不能同时用的起因

为什么不能把 v-if 和v-for同时用在同一个元素上？

当 Vue 解决指令的时候，v-for的优先级比 v-if 高，因而这个模板：

<ul>
  <li v-for="item in list" v-if="item.isActive" :key="item.id">
    {{item.name}}
  </li>
</ul>

会通过如下运算：

this.list.map(function(item) {if (item.isActive) {return item.name}
})

咱们每次从新渲染的时候都要遍历整个列表，即便 isActive 为true的 item 很少，这会带来性能方面的极大节约，因而两者不能同时用在同一个元素上

2.2 v-if 和 v-for 一起用的解决方案

1、如果想管制整个列表的显隐，能够将 v-if 挪动到容器元素上，比方：

<body>
  <div id="example">
    <ul v-if="listShow">
      <li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      list: [{ id: 1, name: "路飞", isActive: true},
        {id: 2, name: "索隆", isActive: false},
        {id: 3, name: "山治", isActive: true},
      ],
      listShow: false,
    }
  });
</script>

2、如果想过滤列表中的我的项目，能够应用计算属性 (computed) 返回过滤后的列表，比方：

<body>
  <div id="example">
    <ul>
      <li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      list: [{ id: 1, name: "路飞", isActive: true},
        {id: 2, name: "索隆", isActive: false},
        {id: 3, name: "山治", isActive: true},
      ],
    },
    computed: {activeItems: function () {return this.list.filter((item) => item.isActive);
      },
    },
  });
</script>

3 列表渲染的 key 有什么用

在应用 v-for 进行列表渲染时，必须给元素增加一个 key 属性，并且这个 key 必须是 惟一标识

<ul>
    <li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>

咱们晓得，Vue 在更新元素时，不会间接操作实在 DOM（渲染实在 DOM 开销是很大的），而是依据新数据生成 新的虚构 DOM，而后对新旧虚构 DOM 进行差别比照，依据比照后果进行 DOM 操作来更新视图

列表渲染时，如果有 key 属性，因为它是惟一标识，在比照两个新旧节点时若 key 不同也就没有深刻比照的必要了。

为什么不能用 index 作为 key？因为index 是不稳固可变的，比方删除了列表第一个元素，会导致前面的元素 index 发生变化，从而导致 key 发生变化。这时，Vue 在比照新旧节点时，遇到 key 雷同的节点，就会进行深刻比照，发现节点内容产生了变动，就会去创立新的实在 DOM 用来替换原来的实在 DOM。本来只须要删除实在 DOM 中第一个元素的操作，会变成新建、替换后续所有实在 DOM，造成性能的极大节约

公众号【前端嘛】

退出移动版