Vue3.x基础-4.v-if、v-show、v-for、v-once等指令

---

前言

Vue指令一般指的是带有v-前缀的特殊属性，除v-for 和 v-on以外指令属性的值预期是单个 JavaScript 表达式。指令根据其所绑定的值，响应式地作用于相应的DOM元素。

一、v-if

v-if是一个用于控制DOM是否渲染的指令，如果所绑定的值或者表达式成立即渲染相应DOM模块，反之则不渲染。

<span v-if="sign">666</span> // 如果data中的sign为true则渲染该span标签

使用v-if控制DOM元素会反复操作DOM，引起重绘重排，在一些经常需要切换显示隐藏的业务场景建议使用v-show指令。

二、v-show

v-show指令是通过元素的display属性来控制元素在页面上的显隐，当v-show指令的值为false时，会给所在的DOM元素添加display: none;，即将元素设置为隐藏，反之，当v-show指令的值为true时元素display: block;。

v-show与v-if都可以用来控制元素的显隐，但是v-if是惰性的：如果在初始渲染时条件为假，则什么也不做，此时DOM树中并没有该元素的节点，直到条件第一次变为真时，才会开始生成该DOM并渲染。
而v-show不论条件是否成立，都会将元素生成对应的DOM节点添加到DOM树中，只是通过display去控制其显示状态。

三、v-for

v-for常常用在循环数组，将的每一项渲染到页面中。
v-for通常使用in的方式进行循环：

<li v-for="(item,index)in list" :key="item.message">{{ item.message }}</li>

也可以使用of:

<div v-for="item of items"></div>

其中list就是需要被循环的数组，item就是数组的每一项，index为循环索引。官方建议在v-for进行循环时加入:key，key值是每个节点的标识，Vue在list更新变化时会根据diff算法使用key值更新每个节点。不建议将索引index作为:key值，这会导致在list被改变时可能触发Vue的多次渲染。

v-for 还可以用来遍历一个对象的 property。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

结果为：

· How to do lists in Vue
· Jane Doe
· 2016-04-10

也可以提供第二个的参数为 property 名称 (也就是键名)：

<div v-for="(value,name,index) in object">
  {{ name }}: {{ value }}
</div>

title:How to do lists in Vue
author:Jane Doe
publishedAt:2016-04-10

四、v-once

v-once只会将指定的元素和组件渲染一次，Vue会把v-once对应的节点看作一个静态节点，而不是一个响应式的数据，可以用于优化更新性能。

五、tips

不要把v-for和v-if写在同一个元素上，如果这么做，vue会优先进行for循环，再进行if判断，如果if为false，那岂不是循环了又不做渲染，浪费性能~