前端必备：vue中和性能有关的两个属性

永远不要把 v-if  和 v-for 放在同一个DOM元素上（同一个标签上），如下面代码所示

// 错误示例

<li v-for = "item in items" v-if = "item.id ===3 "> //同时在<li>标签上使用两个指令

    {{ item.id }}

</li>

在这样的情况下，会大量浪费系统资源，严重时可造成系统运行不畅，甚至死机。
Vue.js中，v-for的优先级比v-if更高，这就造成了两者若是同时使用，v-for会首先循环，忽
略掉v-if的条件。若v-for的元素很多，即使只想展示一小部分数据，系统还是会把所有的数
据都渲染出来，之后再通过v-if的条件来决定是否要去掉这些DOM元素，十分消耗系统资源
所以正确的做法如下。 

// 正确示例

<ul v-if="items.length">  //在<ul>标签上使用v-if指令
    <li v-for="item in items"key="item.id">  //在<li>标签上使用v-for指令
        {{ item.id }}
    </1i>
</ul>

上述代码中，先在<ul>标签上判断items的长度。若是items的长度不大于1，则不会渲染里面的内容；若是items的长度大于或等于1，才会渲染里面的<li>标签。渲染的时候会根据v-for指令来循环，这也是符合Vue.js语法风格的一种写法。